Angular FormControl类型与接口不匹配：设默认值仍报错？

问题代码 #

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

export interface PaymentFormGroup {
  amount: FormControl<number>;
  reason: FormControl<string>;
  addQr: FormControl<boolean>;
}

@Component({
  selector: 'app-pay',
  templateUrl: './pay.component.html',
  styleUrls: ['./pay.component.scss'],
})
export class PayComponent implements OnInit {
  protected isChecked: boolean = false;
  protected paymentFormGroup: FormGroup<PaymentFormGroup>;

  constructor(private _modalCtrl: ModalController) {}

  ngOnInit() {
    this.paymentFormGroup = new FormGroup<PaymentFormGroup>({
      amount: new FormControl<number>(0 as number, [Validators.required]),
      reason: new FormControl<string>('', [Validators.required]),
      addQr: new FormControl<boolean>(this.isChecked),
    });
  }

  protected cancel(): void {
    this._modalCtrl.dismiss(null, 'cancel');
  }

  protected confirm(): void {
    this._modalCtrl.dismiss(null, 'confirm');
  }
}

报错信息 #

TS2322: Type 'FormControl<boolean | null>' is not assignable to type 'FormControl'.
Type 'boolean | null' is not assignable to type 'boolean'.
Type 'null' is not assignable to type 'boolean'.

原因分析 #

Angular Reactive Forms的FormControl默认是可空类型——哪怕你设置了初始值，它的类型依然会被推断为T | null，因为框架默认允许控件值被置为null（比如表单重置、清空操作）。而你定义的PaymentFormGroup接口要求控件类型是严格的FormControl<boolean>/FormControl<number>/FormControl<string>，不允许值为null，因此出现类型不匹配错误。

另外，Validators.required是运行时验证规则，仅能确保表单提交时控件有值，但不会改变TypeScript的编译时类型推断，所以即使加了必填验证，依然会出现类型错误。

解决方案 #

方案一：开启FormControl的非空配置（推荐） #

在创建FormControl时添加{ nonNullable: true }配置，强制控件值类型为非空的T，与接口定义完全匹配：

ngOnInit() {
  this.paymentFormGroup = new FormGroup<PaymentFormGroup>({
    amount: new FormControl<number>(0 as number, {
      validators: [Validators.required],
      nonNullable: true
    }),
    reason: new FormControl<string>('', {
      validators: [Validators.required],
      nonNullable: true
    }),
    addQr: new FormControl<boolean>(this.isChecked, { nonNullable: true }),
  });
}

方案二：修改接口允许可空类型 #

如果不需要严格的非空约束，可以调整接口定义，让控件类型支持null值：

export interface PaymentFormGroup {
  amount: FormControl<number | null>;
  reason: FormControl<string | null>;
  addQr: FormControl<boolean | null>;
}

内容的提问来源于stack exchange，提问作者Parse-Vader