FormGroup<T> doesn't have the correct types in some cases

[MattHoneycutt]

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:

First, this project is fantastic, and I love it! I'm reporting a few issues I've found with the types of controls on a FormGroup.

Current behavior

Consider this model:

interface FooForm {
  id: number;
  name: string;

  createDate: Date;

  bars: BarForm[];
}

interface BarForm {
  key: string;
  value: number;
}

And this code to create a FormGroup using FormBuilder:

  fooBarForm = this.formBuilder.group<FooForm>({
    id: [null, [Validators.required, Validators.min(100), Validators.max(999)]],
    name: [null, Validators.required],
    createDate: [null, Validators.required],
    bars: this.formBuilder.array<BarForm>([]),
  });

Expected behavior

I should be able to bind an input to the createDate control like this:

<input  type="date" [formControl]="fooBarForm.controls.createDate" />

But this gives an error because the type of createDate is actually AbstractControl<Date> and not FormControl<Date>.

Casting it to any works fine though, like this:

<input  type="date" [formControl]="$any(fooBarForm.controls.createDate)" />

Next, FormArray members do not seem to have the correct type inferred. Using the same starting code as above, I would expect to be able to iterate the array member of my form group like this:

    <div class="row" *ngFor="let barForm of fooBarForm.controls.bars">
       <!-- Snip -->
    </div>

However, bars has type AbstractControl<BarForm[], any> instead of FormArray<BarForm>. I can use a helper to cast it to the correct type, then I'm able to iterate it just fine:

  get barsArray() {
    return this.fooBarForm.controls.bars as FormArray<BarForm>;
  }

Finally, each control within FormArray<BarForm> is of type AbstractControl<BarForm> instead of type FormGroup<BarForm>. I can see why that would be the case, but it would be awesome if it returned the actual FormGroup type.

Minimal reproduction of the problem with instructions

I've made a Stackblitz showing the issues. Note that my workarounds are applied so that the code will compile.

https://stackblitz.com/edit/angular-ivy-w5uadp

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

Returning more-correct types allows for a nicer coding experience and enables strongly-typed binding and enumeration in views, which is awesome! 🙂

Environment

Angular version: 12.2.5
ngneat/reactive-forms: 2.0.0


Browser:
- [X] 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: 12.10.0
- Platform:  Windows 

Others:

Again, awesome library, thank you for providing it, and please let me know if I can provide any other info.

[NetanelBasal]

Thanks for the report. The author of this is no longer associated with Angular. I will look into it when I have time.

[MattHoneycutt]

Ah, I see. Is this project heading towards being abandoned? I'm trying to decide if it is "safe" to use this for brand-new projects, or if I should steer clear.

Thanks!

[NetanelBasal]

I'm going to write everything from scratch. I recommend waiting for this. It's coming soon.

[NetanelBasal]

I am closing this issue as I released v3.