Type TypedFormGroup<> is not assignable to type FormGroup

[rlzdesenv]

is it possible to remove this alert, i followed the whole manual to create the FormGroup

public form:NgxSubForm<Endereco, Endereco> help on to find out the name of the variables in [formControlName]="form.formControlNames.city"

<div class="row gy-1 gx-2" [formGroup]="form.formGroup">
    <div class="col-md-6">
        <app-input-text label="Email" [formControlName]="form.formControlNames.city"></app-input-text>
    </div>
</div>

import {Component, forwardRef, OnInit} from '@angular/core';
import {createForm, FormType, NgxSubForm, subformComponentProviders} from 'ngx-sub-form';
import {FormControl, FormGroup, Validators} from '@angular/forms';

export interface Endereco {
    street: string;
    city: string;
    state: string;
    zipCode: string;
}

@Component({
    selector: 'app-endereco-form',
    templateUrl: './endereco.form.html',
    styleUrls: ['./endereco.form.scss'],
    providers: subformComponentProviders( forwardRef(() => EnderecoForm) ),
})
export class EnderecoForm implements OnInit {

    public form:NgxSubForm<Endereco, Endereco> = createForm<Endereco>(this, {
        formType: FormType.SUB,
        formControls: {
            street: new FormControl(null, Validators.required),
            city: new FormControl(null, Validators.required),
            state: new FormControl(null, Validators.required),
            zipCode: new FormControl(null, Validators.required),
        },
    });

    constructor() {
    }

    ngOnInit(): void {
    }

}

[maxime1992]

Yep the typings introduced by Angular 14 are a major change in forms, at least ofc typing wise and ngx-sub-form had made it's own typings since we had none provided previously.

We haven't investigated any further if we should ditch our own types and use the ones from angular only. I think that while it may seem like a good idea there are numbers of places where it'd clash with ngx-sub-form so unsure for now.

At the moment, the only way to get rid of that while keeping type safety template side; it's to use $any. Example:

[formGroup]="$any(form.formGroup)"

I hate to say this because I'm always all for maximum type safety but for now it's the best we've got. It's not too bad because it's not like the type of form.formGroup is likely to change at all and you still get type safety for all the rest

[rlzdesenv]

thanks

[andreashouben]

Hi there, I also encountered that issue and noticed that it only occurs in IntelliJ/Webstorm. VS Code doesn't have to seem that problem. Any idea why?

[maxime1992]

Could be that your IDE is using a custom tsconfig behind the scenes with different values for the angular compiler options (probably something stricter).