Angular12项目出现TS2531空值及TS7008隐式any类型报错求解

问题1：模板TS2531 错误 Object is possibly 'null' #

报错原因 #

TypeScript 严格模式下，AbstractControl.get() 方法的返回值类型为 AbstractControl | null，编译器无法确定目标表单控件一定存在，因此抛出空值警告。

解决方案 #

两种可选方案：

方案1：模板使用可选链运算符（改动最小）

将所有feedbackForm.get('xxx')调用后增加可选链运算符?.，示例如下：

<!-- 修改前 -->
<mat-error *ngIf="feedbackForm.get('firstname').hasError('required') && feedbackForm.get('firstname').touched">First name is required</mat-error>
<!-- 修改后 -->
<mat-error *ngIf="feedbackForm.get('firstname')?.hasError('required') && feedbackForm.get('firstname')?.touched">First name is required</mat-error>

所有表单控件的get调用都按上述规则修改即可。

方案2：TS文件封装表单控件Getter（更易维护）

在组件类中提前定义所有表单控件的getter，模板直接调用getter即可，不需要每次执行get方法：

// ts文件中添加如下代码
get firstname() { return this.feedbackForm.get('firstname')!; }
get lastname() { return this.feedbackForm.get('lastname')!; }
get telnum() { return this.feedbackForm.get('telnum')!; }
get email() { return this.feedbackForm.get('email')!; }

模板修改为直接调用对应getter：

<mat-error *ngIf="firstname.hasError('required') && firstname.touched">First name is required</mat-error>

问题2：TS7008 错误 Member 'feedbackFormDirective' implicitly has an 'any' type #

报错原因 #

@ViewChild 查询到的模板变量未声明类型，TypeScript 严格模式下不允许隐式any类型。

解决方案 #

1. 首先从@angular/forms导入NgForm类型
2. 给feedbackFormDirective添加显式类型声明，同时添加非空断言运算符!（确认视图初始化后该变量一定存在）
   修改后的代码如下：

// 顶部导入NgForm
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';

// 原声明修改为
@ViewChild('fform') feedbackFormDirective!: NgForm;

补充说明 #

你当前代码中constructor调用了this.createForm()但未给出该方法实现，需补充该方法初始化表单，示例实现如下：

createForm() {
  this.feedbackForm = this.fb.group({
    firstname: ['', Validators.required],
    lastname: ['', Validators.required],
    telnum: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    agree: false,
    contacttype: 'None',
    message: ''
  });
}

内容的提问来源于stack exchange，提问作者Shaniba Firdouse P