Angular - Object is possibly 'null'.ts(2531)

Question

In my Angular-12, I have this code:

editForm: FormGroup;

onSubmit() {
  // Stop processing form submission if form data is invalid //
  if (this.editForm.invalid) {
    return;
  }

  //  processing form submission data to server //
  const formData = new FormData();

  formData.append('heading', this.editForm.get('heading').value);
  formData.append('title', this.editForm.get('title').value);
  formData.append('image', this.editForm.get('image').value);
  formData.append('description', this.editForm.get('description').value);
  formData.append('id', this.editForm.get('id').value);

  this.http.post(this.serverUrl + 'updateAbout', formData).subscribe((res: any) => {
      this.router.navigate(['admin/about']).then(() => this.showToasterSuccess(res.message));
    },
    error => this.router.navigate(['admin/about']).then(() => this.showToasterError(error[0].message))
  );

}

We got this error:

Object is possibly 'null'.ts(2531)

and this is highlighted:

formData.append('heading', this.editForm.get('heading').value);

I applied some of the similar solutions in stackoverflow, but none is working.

For instance, in tsconfig.json, I added "strictNullChecks": true to:

 "angularCompilerOptions": {
   "enableI18nLegacyMessageIdFormat": false,
   "strictInjectionParameters": true,
   "strictInputAccessModifiers": true,
   "strictTemplates": true,
   "strictNullChecks": true
 }

But the problem is still not resolved.

How do I get it sorted out?

Thanks

Lazar Ljubenović · Accepted Answer · 2021-07-11 07:53:05Z

2

formData.append('heading', this.editForm.get('heading').value);
                                                       ^

Angular cannot be sure that a form control exists with a name heading, which is why the get method returns an AbstractControl | null. If you're sure that you're not making a typo with 'heading' and you're sure that the result will be non-null, you can use a non-null assertion operator.

formData.append('heading', this.editForm.get('heading')!.value);

answered Jul 11, 2021 at 7:53

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul solanki · Accepted Answer · 2021-07-11 08:27:47Z

0

You have to instantiate the formGroup as shown below

 ngOnInit(): void {
    this.editForm = new FormGroup({
      heading: new FormControl('heading'),
      title: new FormControl('title'),
      image: new FormControl('image'),
      description: new FormControl('description'),
      id: new FormControl('id'),
    });
  }

In onSubmit :


  onSubmit() {
    // Stop processing form submission if form data is invalid //
    if (this.editForm.invalid) {
      return;
    }
  
    //  processing form submission data to server //
    const formData = new FormData();
  
    formData.append('heading', this.editForm.value.heading);
    console.log(this.editForm.value.heading);
  }

regards,

answered Jul 11, 2021 at 8:27

Rahul solanki

931 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular - Object is possibly 'null'.ts(2531)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related