FormGroupDirective rejects FormGroup

[jczacharia]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

The typescript compiler rejects the reactive-forms FormGroup type. This error occurs:

ERROR in libs/frontend/change-maker/feature-more/src/lib/change-password/change-password.component.html:13:9 - error TS2322: Type 'FormGroup<ChangePasswordForm, any>' is not assignable to type 'FormGroup'.
  Types of property 'get' are incompatible.
    Type '{ <K1 extends "confirmPassword" | "currentPassword" | "newPassword">(path?: [K1] | undefined): AbstractControl<ChangePasswordForm[K1]>; <K1 extends "confirmPassword" | "currentPassword" | "newPassword", K2 extends keyof ChangePasswordForm[K1]>(path?: [K1, K2] | undefined): AbstractControl<ChangePasswordForm[K1][K2]>; <K1 extends "confirmPassword" | "currentPassword" | "newPassword", K2 extends keyof ChangePasswordForm[K1], K3 extends keyof ChangePasswordForm[K1][K2]>(path?: [K1, K2, K3] | undefined): AbstractControl<ChangePasswordForm[K1][K2][K3]>; (path?: string | undefined): AbstractControl<any>; }' is not assignable to type '(path: string | (string | number)[]) => AbstractControl | null'.
      Types of parameters 'path' and 'path' are incompatible.
        Type 'string | (string | number)[]' is not assignable to type '[any] | undefined'.
          Type 'string' is not assignable to type '[any] | undefined'.

13   <form [formGroup]="form" (submit)="submit()">
           ~~~~~~~~~~~~~~~~~~

  libs/frontend/change-maker/feature-more/src/lib/change-password/change-password.component.ts:21:16
    21   templateUrl: './change-password.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ChangePasswordComponent.

Expected behavior

There are no type errors.

Minimal reproduction of the problem with instructions

This is the code used. Note that I have strict mode in my tsconfig.json

import { FormControl, FormGroup } from '@ngneat/reactive-forms';

interface ChangePasswordForm {
  currentPassword: string;
  newPassword: string;
  confirmPassword: string;
}

@Component({
  selector: 'cm-more-change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChangePasswordComponent extends ComponentStore<State> {
  readonly form = new FormGroup<ChangePasswordForm>(
    {
      currentPassword: new FormControl('', Validators.compose([(ac) => Validators.required(ac)])),
      newPassword: new FormControl(
        '',
        Validators.compose([(ac) => Validators.required(ac), Validators.pattern(Config.regex.password)])
      ),
      confirmPassword: new FormControl(
        '',
        Validators.compose([(ac) => Validators.required(ac), Validators.pattern(Config.regex.password)])
      ),
    },
    { validators: (ac) => ConfirmPasswordValidator.MatchPassword(ac, 'newPassword', 'confirmPassword') }
  );
}

HTML snippet:

<form [formGroup]="form" (submit)="submit()">
    <im-input label="Current Password">
      <ion-icon slot="start" name="lock-closed"></ion-icon>
      <input formControlName="currentPassword" type="password" placeholder="Current Password" />
      <im-error *ngIf="!form.controls.currentPassword.valid && form.controls.currentPassword.touched">
        Please enter your current password.
      </im-error>
    </im-input>
    <im-input label="New Password">
      <ion-icon slot="start" name="lock-closed"></ion-icon>
      <input formControlName="newPassword" type="password" placeholder="New Password" />
      <im-error *ngIf="!form.controls.newPassword.valid && form.controls.newPassword.touched">
        Your password must be minimum 8 characters, contain at least 1 letter, 1 number, and 1 special
        character.
      </im-error>
    </im-input>
    <im-input label="Confirm New Password">
      <ion-icon slot="start" name="lock-closed"></ion-icon>
      <input formControlName="confirmPassword" type="password" placeholder="Confirm New Password" />
      <im-error *ngIf="!form.controls.confirmPassword.valid && form.controls.confirmPassword.touched">
        Your new password must be valid match.
      </im-error>
    </im-input>
    <!-- Implicit button for form when pressing enter button -->
    <button style="display: none;" [disabled]="!form.valid"></button>
  </form>

What is the motivation / use case for changing the behavior?

Environment

Angular version: 9.1.11


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version 84.0.522.48
 
For Tooling issues:
- Node version: XX  12.13
- Platform:  Docker, Windows

Others:

[jczacharia]

It is definitely b/c of strict mode. I noticed there is a PR to fix this. Closing

[danzrou]

We are indeed working on a solution for strict mode, currently investigating an issue that might be related to TS.