嗨,我尝试在 angular 11 中进行反应式表单验证,但在终端中显示以下错误。
错误 TS2531 对象可能为空。
我在 signup.component.ts 中的代码
import {FormGroup, FormControl, Validators} from '@angular/forms';
form = new FormGroup({
firstName: new FormControl('',Validators.required)
})
get f()
{
return this.form.controls;
}
在 signup.component.html 中
<form role="form" [formGroup]="form">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" formControlName="firstName" [ngClass]="{'is-invalid':form.get('firstName').touched && form.get('firstName').invalid}">
<div *ngIf="f.firstName.touched && f.firstName.invalid">
<small class="text-danger" *ngIf="f.firstName.errors.required">
Name is required!
</small>
</div>
</div>
</form>
当我运行它的显示错误
必需"> 姓名为必填项!
错误 TS2531 对象可能为空。
答案 0 :(得分:21)
对象 f.firstName.errors
可以为 null。使用安全导航运算符 ?
:
*ngIf="f.firstName.errors?.required"