Form Group getting 'null' or 'undefined' error-CodePudding

i have a component.ts that looks like this :

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Observable, Subscription} from "rxjs";
import {ArticleService} from "../article.service";

@Component({
  selector: 'app-article-new',
  templateUrl: './article-new.component.html',
  styleUrls: ['./article-new.component.css']
})
export class ArticleNewComponent implements OnInit {

  response$?: Subscription;

  constructor(private formBuilder: FormBuilder, private articleService: ArticleService) { }

  articleForm: FormGroup = this.formBuilder.group({
    title: ['', Validators.required],
    content: ['', [Validators.required, Validators.minLength(69)]]
  })

  ngOnInit(): void {
  }

  async submit(){
    console.log('article / sub', this.articleForm.value);
    this.response$ = await this.articleService.createArticle(this.articleForm.value).subscribe(
      res => console.log(res)
    );
  }

  get title() {
    return this.articleForm.get('title');
  }

  get content() {
    return this.articleForm.get('content');
  }
}

And the html of the component :

<h3>Create New Article</h3>
<form [formGroup]="articleForm" (ngSubmit)="submit()">
  <div >
    <label for="title">Title :</label>
    <input type="text" formControlName="title"  id="title" required>
    <div *ngIf="title?.invalid" >
      Title is required
    </div>
  </div>

  <div >
    <label for="content">Content :</label>
    <textarea  formControlName="content" id="content" rows="3" required></textarea>
    <div *ngIf="content?.errors && (content?.errors['required'] !== null)" >
      Content is required
    </div>
    <div *ngIf="content?.errors && (content?.errors['minLength'] !== null)" >
      Minimum length
    </div>
  </div>

  <button type="submit" >Submit</button>
</form>

As you can see, i have 3 divs with *ngIf. The first one with "Title" gave me a similar error that i solved by adding "?" after the variable name.

But with the content variable, adding the question mark didn't change anything. So i have that error for those 2 divs :

TS2533: Object is possibly 'null' or 'undefined'.

CodePudding user response：

Try to use this :

articleForm= new FormGroup({
     title: new FormControl('', Validators.required),
     content: new FormControl('', [Validators.required, Validators.minLength(69)])
});

See this documentation : https://www.concretepage.com/angular-2/angular-2-formgroup-example

CodePudding user response：

Move the form creation logic inside ngOnInit hook

  ngOnInit(): void {
     this.buildForm();
  }
  
  buildForm():void{
    this.articleForm = this.formBuilder.group({
      title: ['', Validators.required],
      content: ['', [Validators.required, Validators.minLength(69)]]
    })
  }

and add check in html part for articleForm

<form *ngIf="articleForm" [formGroup]="articleForm" (ngSubmit)="submit()">