错误 TS2531 对象在角度反应形式中可能为空

Question

嗨，我尝试在 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>

当我运行它的显示错误时

<小班= “TEXT-危险” * ngIf = “f.firstName.errors。需要”>名称是必需的！

错误 TS2531 对象可能为空。

Answer 1

该对象f.firstName.errors可以为空。使用安全导航操作符?：

*ngIf="f.firstName.errors?.required"

Answer 2

最新版本的 Angular 要求您在第一个 if 检查中使用安全导航操作符，例如。

*ngIf="f.firstName?.touched && f.firstName?.invalid"

然后最后

*ngIf="f.firstName.errors?.required"

Answer 3

对于角度版本^14.0，可以使用：

form.controls['firstName'].errors?.['required']
and 
form.controls['firstName'].errors?.['minlength']