V2 - Fully Typed Version [BREAKING_CHANGES]

[NetanelBasal]

In the current version, we tried to provide the maximum typing functionality we could get to make the migration as seamless as possible.

In the next version, we want to add the following features:

• Currently, when using get or getControl we need to infer the control type explicitly:

const profileForm = new FormGroup<Profile>({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  skills: new FormArray([]),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl('')
  })
});

const cityControl = profileForm.getControl('address', 'city') as FormControl<string>;

We need to use TS to automatically infer the type so that users can write:

const cityControl = profileForm.getControl('address', 'city');

• Improving Validators' typings. It'll be great to add both the control value and errors type:

type Errors = {
  passwordMismatch: boolean;
}

const form = new FormGroup<ChangePasswordForm, Errors>({
  password: new FormControl(),
  repeatPassword: new FormControl()
}, 
{ validator });

// The signature of validator should automatically be:
function validator(control: FormGroup<ChangePasswordForm>): Errors | null {}

[rafaelss95]

Yes, I just faced problem with it today while migrating an app from Angular Reactive Forms to this lib. Sample of the problem:

Component:

this.formGroup = this.formBuilder.group<User>({
  address: this.formBuilder.group<Address>({
    street: '',
    city: ''
  })
});

HTML:

<!-- The same happens if you use `getControl` or `.controls.` as both return `AbstractControl`, 
        which it isn't accepted by `formGroup` `@Input`. -->
<app-custom-component
  [formGroup]="formGroup.get('address')"
></app-custom-component>

Type 'AbstractControl<Address>' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

---

To make it work under strict we have to use $any(...)