Type 'FormGroup | null' is not assignable to type 'FormGroup'. Type 'null' is not assignable to type 'FormGroup'. Angular 11

user_14448674 0
Viewed 14548

I am new to Angular, I use version 11. And I have a problem with the formGroup attribute in my html file.

Error :

'FormGroup | null' is not assignable to type 'FormGroup'. Type 'null' is not assignable to type 'FormGroup'.

2 <form [formGroup]="produitFormGroup">

My html code.

 <form [formGroup]="produitFormGroup">
    <div class="form-group">
        <label>Nom</label>
        <input type="text" class="form-control" formControlName="name">
    </div>
    <div class="form-group">
        <label>Prix</label>
        <input type="text" class="form-control" formControlName="price">
    </div>
    <div class="form-group">
        <label>Quantite</label>
        <input type="text" class="form-control" formControlName="quantity">
    </div>
    <div class="form-group">
        <label>Selected</label>
        <input type="checkbox" formControlName="selected">
    </div>
    <div class="form-group">
        <label>Available</label>
        <input type="checkbox" formControlName="available">
    </div>
    <button class="btn btn-success">Enregistrer</button>
</form>

And my ts file code:

produitFormGroup: FormGroup | null= null;

constructor(private fb: FormBuilder) { }

ngOnInit(): void {

   this.produitFormGroup = this.fb.group({
   name:["", Validators.required],
   price:[0, Validators.required],
   quantity:[0, Validators.required],
   selected:[true, Validators.required],
   available:[true, Validators.required]

 });

}
angular-reactive-forms angular api html
4 Answers

You need to add ! operator after produitFormGroup like this:

produitFormGroup!: FormGroup;

It is a way to tell the compiler explicitly that an expression has value other than null or undefined

user_137919210

Problem Analysis

Basically the problem is that in the line <form [formGroup]="produitFormGroup"> you are expected to pass a FormGroup but you are passing FormGroup | null So basically when the value of produitFormGroup is null, your code will fail, luckily typescript has captured this error for you

Solution

Whenever I need to initialize my Forms I simply initialize them when declaring the property, something like below

produitFormGroup = this.fb.group({
   name:["", Validators.required],
   price:[0, Validators.required],
   quantity:[0, Validators.required],
   selected:[true, Validators.required],
   available:[true, Validators.required]
 });;

constructor(private fb: FormBuilder) { }

ngOnInit(): void {

}

What About the type ?

I have intentionally omitted typing. this.fb.group({ ... }) returns a FormGroup so by Inferance produitFormGroup is assigned type FormGroup

user_136801150

If initializing the FormGroup isn't an option (if it is an input property on a child component for example) using an ngIf statement will pass the strict template checking:

  <form *ngIf="produitFormGroup" [formGroup]="produitFormGroup">
    ...
  </form>
user_35346360

Actually at produitFormGroup: FormGroup | null= null; Statement you are trying to assign null value to the FormGroup explicitly but the problem is TypeScript's type checker doesn't allow these kind of assignment.

Solution 1 :(By Changing null checking flags)

  • change produitFormGroup: FormGroup | null= null; to produitFormGroup: FormGroup;.
  • change "strict": true, to "strict": false, on tsconfig.json
  • here,the TS compilers type checker will permanently ignore the null and undefined value checking for whole project.

Solution 2 (By using ! operator.) [Recomended]

  • change produitFormGroup: FormGroup | null= null; to produitFormGroup!: FormGroup;.

  • Here,The non-null assertion operator(!) will take care of null and undefined values

user_89397170
Related