`


$3

this.createForm();
this.logNameChange();
}
`


$3

this.form = this.fb.group({
name: new FormControl(null, [Validators.required]),
address: this.formBuilder.group({
suburb: new FormControl(''),
postcode: new FormControl('', [Validators.required]),
})
});
`


Peer Dependencies

@angular/forms and all its peer dependencies.

This package has been tested with Angular 9, 10, 11.

(Should work with Angular 4, 5, 6, 7, 8 too)

I would encourage you to use versions Angular still support, see Angular's Support policy and schedule.

Blog

For a more in detail description of the benefits of this package, read my blog - Angular typesafe reactive forms.

When reading the blog, be mindful that it was written Oct-2017, before the angular-typesafe-reactive-forms-helper package existed. Back then, the idea was to copy the code and adjust as needed. Since then, there were a few requests, thus angular-typesafe-reactive-forms-helper was born.

Contributions

I only added features required by my projects, but I know more could be added with your help.

Create a PR to get the conversation started :smile:

Lastly

Use it…don’t use it :smile:

---

Release notes

New dist file structure:

`
./dist:
LICENSE
README.md
angular-typesafe-reactive-forms-helper.d.ts
angular-typesafe-reactive-forms-helper.metadata.json
bundles
esm2015
fesm2015
package.json
public_api.d.ts
src

./dist/bundles:
angular-typesafe-reactive-forms-helper.umd.js
angular-typesafe-reactive-forms-helper.umd.js.map
angular-typesafe-reactive-forms-helper.umd.min.js
angular-typesafe-reactive-forms-helper.umd.min.js.map

./dist/esm2015:
angular-typesafe-reactive-forms-helper.js
public_api.js
src

./dist/esm2015/src:
angularTypesafeReactiveFormsHelper.js
getPropertyName.js

./dist/fesm2015:
angular-typesafe-reactive-forms-helper.js
angular-typesafe-reactive-forms-helper.js.map

./dist/src:
angularTypesafeReactiveFormsHelper.d.ts
getPropertyName.d.ts
`

Old dist file structure:

`
./dist:
LICENSE
README.md
lib
package.json

./lib:
angularTypesafeReactiveFormsHelper.d.ts
angularTypesafeReactiveFormsHelper.js
getPropertyName.d.ts
getPropertyName.js
`

---
#### V1.8.2 (2020-09-04)
- Fix bug - getSafe() call fails and returns null when compiled to ES5.

---
#### V1.8.1 (2020-06-26)
- Bump to Angular 10.
- Stop integration tests for Angular 6.

---
#### V1.8.0 (2020-06-16)
- added removeControlSafe

Sample:
`typescript
let sut: FormGroupTypeSafe = createGroup();
sut.removeControlSafe(x => x.heroName);
`

The bottom code was avoided simply because in a variable rename scenario, the IDE should rename all the references instead of just informing one where the errors are.

`typescript
removeControl(name: keyof T): void;
removeControl(name: string): void;
`

---
#### V1.7.0 (2020-05-14)
- added controls

Angular's forms.d.ts:
`typescript
controls: { [key: string]: AbstractControl; };
`

angular-typesafe-reactive-forms-helper:
`typescript
controls: { [P in keyof T]: AbstractControlTypeSafe };
`

Code samples:
`typescript
let sut: FormGroupTypeSafe = createGroup();
// $ExpectType { heroName: AbstractControlTypeSafe; weapons: AbstractControlTypeSafe; }
sut.controls;

// $ExpectType AbstractControlTypeSafe
sut.controls.heroName;
// $ExpectType AbstractControlTypeSafe
sut.controls.weapons;

// $ExpectType string
sut.controls.heroName.value;
// $ExpectType WeaponModel[]
sut.controls.weapons.value;
`

---
#### V1.6.0 (2020-04-22)
- added statusChanges and status

Angular's forms.d.ts:
`typescript
/**
* The validation status of the control. There are four possible
* validation status values:
*
VALID: This control has passed all validation checks.
INVALID: This control has failed at least one validation check.
PENDING: This control is in the midst of conducting a validation check.
DISABLED: This control is exempt from validation checks.
*
* These status values are mutually exclusive, so a control cannot be
* both valid AND invalid or invalid AND disabled.
*/
readonly status: string;
`

angular-typesafe-reactive-forms-helper:
`typescript
export type ControlStatus = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';

export interface FormGroupTypeSafe extends FormGroup {
readonly status: ControlStatus;
readonly statusChanges: Observable;
}
`

Code samples:
`typescript
let sut: FormGroupTypeSafe = createGroup();

// $ExpectType ControlStatus
sut.status;

sut.statusChanges.subscribe(val => {
// $ExpectType ControlStatus
val;
});

// $ExpectType string | undefined
sut.getSafe(x => x.heroName)?.status; // unfortunately this is still string ¯\_(ツ)_/¯

sut.getSafe(x => x.heroName)?.statusChanges.subscribe(val => {
// $ExpectType ControlStatus
val;
});

`

---
#### V1.5.1 (2020-04-17)

Had this error in Angular 9.1.2 when executing ng serve.
The app would show a blank page with an error in browser's devtools console:
`
main.ts:15 Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
- Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at getCompilerFacade (core.js:643)
at Function.get (core.js:16349)
at getFactoryDef (core.js:2200)
at providerToFactory (core.js:17183)
at providerToRecord (core.js:17165)
at R3Injector.processProvider (core.js:16981)
at core.js:16960
at core.js:1400
at Array.forEach ()
at deepForEach (core.js:1400)
`

This is fixed.

More info on the error from StackOverflow.

---
#### V1.5.0 (2020-04-15)

Extend AbstractControlTypeSafe

with:
`typescript
readonly valueChanges: Observable;
get(path: Array | string): AbstractControl | null;
get(path: number[]): AbstractControlTypeSafe | null;
`

- Samples readonly valueChanges: Observable;:
`typescript
let sut: FormGroupTypeSafe = createGroup();
sut.valueChanges.subscribe(val => {
// $ExpectType HeroFormModel
val;
});

sut.getSafe(x => x.heroName).valueChanges.subscribe(val => {
// $ExpectType string
val;
});
`

- Split Angular's get into two functions based on the path: Array | string parameter.

Angular's forms.d.ts:
`typescript
get(path: Array | string): AbstractControl | null;
`

angular-typesafe-reactive-forms-helper:
`typescript
get(path: Array | string): AbstractControl | null;
get(path: number[]): AbstractControlTypeSafe | null;
`

This allows type safety when working with arrays.

`typescript
sut.getSafe(x => x.weapons).get([0]).valueChanges.subscribe(val => {
// $ExpectType WeaponModel
val;
});

// the angular way - .get('person.name')
sut.getSafe(x => x.weapons).get('person.name').valueChanges.subscribe(val => {
// $ExpectType any
val;
});

// the angular way - .get(['person', 'name'])
sut.getSafe(x => x.weapons).get(['person', 'name']).valueChanges.subscribe(val => {
// $ExpectType any
val;
});
`
---
#### V1.4.0 (2020-04-14)
- new interface AbstractControlTypeSafe

which extends from Angular's AbstractControl and will, over time, contain the common properties to Angular's FormGroup, FormControl and FormArray.
Currently it only returns readonly value: T.

- enhanced getSafe to return AbstractControlTypeSafe


`typescript
getSafe

(propertyFunction: (typeVal: T) => P): AbstractControlTypeSafe

| null;
`
Code example:
`typescript
// heroName: string
sut.getSafe(x => x.heroName)?.value; // value's ExpectType => string | undefined
`

- add new type RecursivePartial
- enhanced patchValue to use RecursivePartial so one is not forced by the compiler to complete mandatory properties on a nested types.
`typescript
patchValue(value: RecursivePartial, options?: Object): void;
`
Code Example:
`typescript
let sut: FormGroupTypeSafe = formBuilderTypeSafe.group({...}) // let's pretend a valid FormGroupTypeSafe object was created here
// Looking at the line below...
// Before V1.4.0, Typescript would have complained about missing property damagePoints.
// This is not the case anymore as now all nested types will be Partial properties.
sut.patchValue({ weapons: [{ name: "Head" }]});
`
---
#### V1.3.0 (2020-04-06)
- patchValue

Angular's forms.d.ts:
`typescript
patchValue(value: any, options?: Object): void;
`
angular-typesafe-reactive-forms-helper:
`typescript
patchValue(value: Partial, options?: Object): void;
`

- formBuilderTypeSafe.group\ supports FormArray

`typescript
sut = formBuilderTypeSafe.group({
heroName: new FormControl('He-Man', Validators.required),
weapons: new FormArray([formBuilderTypeSafe.group({
name: new FormControl('Sword', Validators.required),
damagePoints: new FormControl(50, Validators.required)
}),
formBuilderTypeSafe.group({
name: new FormControl('Shield', Validators.required),
damagePoints: new FormControl(0, Validators.required)
}),
])
});
`
---
#### V1.2.0 (2020-04-02)
- valueChanges, function returns Observable\

Angular's forms.d.ts:
`typescript
valueChanges: Observable;
`
angular-typesafe-reactive-forms-helper:
`typescript
valueChanges: Observable;
`
---
#### V1.1.0 (2020-03-31)
- setValue, just a function signature update.

Angular's forms.d.ts function signature:
`typescript
setValue(value: {
[key: string]: any;
}, options?: {
onlySelf?: boolean;
emitEvent?: boolean;
}): void;
`

angular-typesafe-reactive-forms-helper signature:

`typescript
setValue(value: T,
options?: {
onlySelf?: boolean;
emitEvent?: boolean
}): void;
``
---
#### V1.0.0 (2020-03-29)
angular-typesafe-reactive-forms-helper has these extra functions:
- getSafe
- setControlSafe