Object is possibly "null" TS2531 angular-reactive forms

Question

I tried to do reactive form validation in angular but I am getting an error. My goal is for the program to warn the user when the user leaves the required fields blank.

product-add-forms2.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Product } from '../product';

@Component({
  selector: 'app-product-add-forms2',
  templateUrl: './product-add-forms2.component.html',
  styleUrls: ['./product-add-forms2.component.css']
})
export class ProductAddForms2Component implements OnInit {

  constructor(private formBuilder: FormBuilder) { }

  productAddForm: FormGroup;
  product: Product = new Product();

  createProductAddForm() {
    this.productAddForm = this.formBuilder.group({
      name: ["", Validators.required],
      description: ["", Validators.required],
      imageUrl: ["", Validators.required],
      price: ["", Validators.required],
      categoryId: ["", Validators.required],
    });
  }



  ngOnInit(): void {
    this.createProductAddForm();
  }

  add() {
    if (this.productAddForm.valid) {
      this.product = Object.assign({}, this.productAddForm.value)
    }
  }

}

product-add-forms2.component.html

<h3>New Product - Reactive</h3>
<form [formGroup]="productAddForm" (ngSumbit)="add()" class="form-group">
  <div>
    <input type="text" id="name" name="name" formControlName="name" class="form-control" placeholder="Ürün Adı">
    <div class="alert alert-danger"
      *ngIf="productAddForm.get('name').hasError('required') && productAddForm.get('name').dirty">Product name is required
    </div>
  </div>
</form>

when i run its showing error in

<div class="alert alert-danger"
  *ngIf="productAddForm.get('name').hasError('required') && productAddForm.get('name').dirty">Product name is required
</div>

the part i'm talking about (hasError) and (dirty)

Do these answer your question? [error TS2531 object is possibly null in angular reactive forms](https://stackoverflow.com/questions/65966720/error-ts2531-object-is-possibly-null-in-angular-reactive-forms), [How to suppress “error TS2533: Object is possibly 'null' or 'undefined'”?](https://stackoverflow.com/q/40349987/8017690) — Yong Shun, Aug 19 '21 at 11:24
@AlirezaAhmadi Sorry, I don't know how to do it. I'm new at this job. — jron, Aug 19 '21 at 12:05
I put your code here: https://stackblitz.com/edit/angular-8-reactive-form-validation-manxhc?file=app%2Fapp.component.html, I can't see any error — Alireza Ahmadi, Aug 19 '21 at 12:30

score 0 · Answer 1 · answered Aug 19 '21 at 15:31

Starting from Angular 12 the strict check in Typescript is enabled by default. You can either disable it or use ! operator. For example: Change productAddForm: FormGroup; to productAddForm!: FormGroup; The ! means I know it is null now, but it should be defined on runtime.

Object is possibly "null" TS2531 angular-reactive forms

1 Answers1