Support strict option

[chrisguttandin]

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

TypeScript will not compile the project because of the following errors:

Property 'group' in type 'FormBuilder' is not assignable to the same property in base type 'FormBuilder'.
Property 'controls' in type 'FormGroup<T, E>' is not assignable to the same property in base type 'FormGroup'.

Expected behavior

I would expect the project to compile successfully.

Minimal reproduction of the problem with instructions

Please, let me know if a repo with an example project would be helpful. I'm happy to create one if necessary.

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

I would like to use this library with Angular v10.

Environment

Angular version: 10.0.1


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
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v12.18.2
- Platform: MacOS

Others:
- TypeScript: v3.9.5

[NetanelBasal]

@itayod

[danzrou]

@chrisguttandin could please provide a stackblitz/ng-run minimal repo with this?
Thanks

[chrisguttandin]

Hi @NetanelBasal, hi @danzrou, thanks for taking a look.

I created a repo over here: https://github.com/chrisguttandin/reactive-forms

I generated the project with the --strict flag. I then added a dummy form and installed @ngneat/reactive-forms and at last I ran the migration script. https://github.com/chrisguttandin/reactive-forms/commits/master

The --strict flag is necessary to trigger the error which can be seen when running ng build.

[danzrou]

@chrisguttandin can you please try to fork from fix/support-strict and check it out using npm link?

[chrisguttandin]

Hi @danzrou, using npm link did not work for me. It was linking the repository and not the dist folder. Anyway, I manually copied the files and it works perfectly now. Thanks a lot.

[danzrou]

Thanks. @NetanelBasal we can proceed with merge I guess

[NetanelBasal]

Nope. We need to check it on our project first to see that it didn't cause regressions.

[jonrwads]

I believe I have a problem that is related to this one. Trying to upgrade to Angular 10 and on build I get this error
ERROR in node_modules/@ngneat/reactive-forms/lib/formControl.d.ts:7:14 - error TS2610: 'asyncValidator' is defined as an accessor in class 'FormControl', but is overridden here in 'FormControl<T, E>' as an instance property.

If this is related, when might the pull request be merged in. Otherwise I can open up a new issue as I cannot find any matching issue or pull request that is similar to this issue.

Thanks

[NetanelBasal]

It's not related. We should change asyncValidator to a getter. You can open a PR.

[tobang]

Any news on when this will be merged?

[danzrou]

@chrisguttandin @tobang

I could not reproduce this on the latest version, can you check?

[chrisguttandin]

Hi @danzrou, thanks for the heads-up. The example repo (https://github.com/chrisguttandin/reactive-forms) I built for this issue compiles successfully with v1.4.2. I think we can close this.

[rafaelss95]

Hmm, I'm not sure if it's really related to this issue, but I faced an issue using strict today after upgrade to v1.4.2...

Component:

export interface User {
  readonly age: number;
  readonly name?: string;
}

...

@Component({ ... })
export class MyComponent {
  readonly formGroup = this.formBuilder.group<User>({
    age: [0, [Validators.required]],
    name: undefined,
  });
}

HTML:

<ng-container [formGroup]="formGroup">
  ...
</ng-container>

It doesn't compile under strict, it throw the following error:

Type 'FormGroup<User, any>' is not assignable to type 'FormGroup'.
      Types of property 'controls' are incompatible.
        Type 'AbstractControlsOf<User>' is not assignable to type '{ [key: string]: AbstractControl; }'.
          Property 'name' is incompatible with index signature.
            Type 'FormControl<string | undefined, any> | undefined' is not assignable to type 'AbstractControl'.
              Type 'undefined' is not assignable to type 'AbstractControl'. 

---

I noticed that it just happens if you have an optional property declared.

[itayod]

@rafaelss95 could you try add Partial type around User and see if it works?

[rafaelss95]

@rafaelss95 could you try add Partial type around User and see if it works?

This doesn't work also, because as I mentioned above, the error happens when you have at least one optional property... so if you make all properties optional using Partial the error remains.