TS2531：对象可能为"空"。反应式表单验证

Question

嗨，我曾尝试在angular 11中进行反应形式验证，但在终端中显示以下错误。

errorTS2531对象可能为null

我在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]
});
} 
}

在register-form.component.html 中

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

当我在中运行它的显示错误时

register-form.component.html:26:17-错误TS2531:对象可能为"null"。

~~~~~~

试试这个，

你的html可以是这样的，

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

和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;
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]
});
} 
}

TypeScript文件：

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文件：

<div class="form-group " [formGroup]="angFormInstance">
<label>Name:</label>
<input class="form-control" formControlName="name" type="text">
<span class="text-danger" *ngIf="(angFormInstance.name.touched || 
submitted) && angFormInstance.name.errors?.required">
Name is required
</span>
</div>