TS2531: Object is possibly 'null'. Reactive-Forms Validation-CodePudding

Hi i have tried to do reactive form validation in angular 11 but its showing following error in terminal.

error TS2531 object is possibly null.

my code in register-form.component.ts

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

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css']
})
  
export class RegisterFormComponent  {
       title = 'Register Form';
        angForm: FormGroup;
        submitted = false;
        
        constructor(private fb: FormBuilder) {
        this.angForm = this.fb.group({
        title: ['', Validators.required ],
        name: ['', Validators.required ],
        gender: ['', Validators.required],
        address: ['', Validators.required ],
        email: ['', Validators.required],
        acceptTerms: [false, Validators.requiredTrue]
        });
    } 
}

in register-form.component.html

        <div >
            <label>Name:</label>
            <input  formControlName="name" type="text">
            </div>
            <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" >
                <div *ngIf="angForm.controls['name'].errors['required']">
                  Name is required.
                </div>
            </div>

when i run its showing error in

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

CodePudding user response：

Try this,

your html can look like this,

<div  [formGroup]="angFormInstance">
    <label>Name:</label>
    <input  formControlName="name" type="text">
</div>
<div *ngIf="angFormInstance.controls['name'].invalid && (angFormInstance.controls['name'].dirty || angFormInstance.controls['name'].touched)" >
    <div *ngIf="angFormInstance.controls['name'].errors['required']">
        Name is required.
    </div>
</div>

and ts file be like,

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

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css']
})
  
export class RegisterFormComponent  {
       title = 'Register Form';
        angForm: FormGroup;
        submitted = false;

        get angFormInstance(): any {
          return this.angForm
        }
        
        constructor(private fb: FormBuilder) {
        this.angForm = fb.group({
        title: ['', Validators.required ],
        name: ['', Validators.required ],
        gender: ['', Validators.required],
        address: ['', Validators.required ],
        email: ['', Validators.required],
        acceptTerms: [false, Validators.requiredTrue]
        });
    } 
}

CodePudding user response：

Ts file:

` import { Component, OnInit } from '@angular/core';

    import { FormBuilder, Validators } from '@angular/forms';

    import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css']
})

export class RegisterFormComponent  {
       title = 'Register Form';
        angForm: FormGroup;
        submitted = false;
    
        constructor(private fb: FormBuilder) {
        this.angForm = this.fb.group({
        title: ['', Validators.required ],
        name: ['', Validators.required ],
        gender: ['', Validators.required],
        address: ['', Validators.required ],
        email: ['', Validators.required],
        acceptTerms: [false, Validators.requiredTrue]
        });
    } 

get angFormInstance():any {

 return this.angForm.controls;

}

} `

HTML File:

`
<div [formGroup]="angFormInstance">

    <label>Name:</label>

    <input  formControlName="name" type="text">

    <span  *ngIf="(angFormInstance.name.touched || 
submitted) && angFormInstance.name.errors?.required">

                   Name is required

    </span>

</div>
                      `