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

Question

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]

 });

}


  
  
  
  

Answer 1

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

Answer 2

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

Checkout this link to find some other ways to fix or know about this issue.