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]

 });

}


  
  
  
  

Khedive

You can just remove the null type declaration and the problem should go away. produitFormGroup: FormGroup | null= null; would become produitFormGroup: FormGroup;, so you understand why the formGroup directive only takes an argument of type FormGroup, you have declared yours as type FormGroup "or" null, which is why you are seeing that error. – Italic

Thanks for the reply, I removed it but the problem persists .... – Khedive

And when I declare produitFormGroup: FormGroup; I have this error : Property 'produitFormGroup' has no initializer and is not definitely assigned in the constructor – Khedive

Could you try to initialize the form in the constructor?. And the declaration, just leave: produitFormGroup: FormGroup; – Hew

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

Apostatize

Thanks, it works! Does this solution have any drawbacks? – Highball

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.

Salmonoid

I just want to provide a warning about the ! operator, and that your suggestion "will take care of null and undefined values". What you're saying is technically incorrect and misleading. The non-null assertion operator is essentially foregoing null/undefined type checking on this property and should be done with care. The ! operator is "turning off" a great typescript feature. I wouldn't say ! is always recommended. Instead provide a valid default value when you declare the property. – Ejector

Answer 3

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>

Cognate

Answer 4

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

Raine