Angular表单如何默认设置所有FormControl为nonNullable？

针对你提到的大量表单控件逐个配置nonNullable: true过于繁琐的问题，有几种高效的解决方法：

方案1：全局/局部配置默认非空表单（Angular 14+） #

Angular 14及以后版本支持为响应式表单全局或局部开启默认非空模式，新建的FormControl会自动启用nonNullable: true，无需逐个手动配置。

模块级别配置（NgModule） #

在模块中导入ReactiveFormsModule时，通过withConfig开启默认非空：

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule.withConfig({ nonNullable: true })
  ]
})
export class AppModule { }

独立组件级别配置 #

如果使用独立组件，在组件的providers数组中通过provideReactiveForms配置：

import { Component } from '@angular/core';
import { provideReactiveForms } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  standalone: true,
  providers: [
    provideReactiveForms({ nonNullable: true })
  ]
})
export class LoginComponent {
  // 此处创建的FormControl默认均为nonNullable: true
  public loginForm = new FormGroup({
    username: new FormControl('', [Validators.required]),
    password: new FormControl('', [Validators.required, Validators.minLength(8)]),
  });
}

方案2：自定义控件工厂函数 #

如果需要针对部分表单灵活控制，可以封装一个工厂函数，快速创建默认非空的FormControl：

import { FormControl, ValidatorFn } from '@angular/forms';

// 封装工厂函数
export function nonNullableControl<T>(initialValue: T, validators?: ValidatorFn | ValidatorFn[]) {
  return new FormControl(initialValue, {
    nonNullable: true,
    validators: validators
  });
}

// 使用示例
public loginForm = new FormGroup({
  username: nonNullableControl('', Validators.required),
  password: nonNullableControl('', [Validators.required, Validators.minLength(8)]),
});

方案3：批量转换现有FormGroup的控件 #

如果已有创建好的FormGroup，想要批量将所有控件设为非空，可以遍历控件修改配置：

import { FormGroup } from '@angular/forms';

function makeFormGroupNonNullable(formGroup: FormGroup) {
  Object.values(formGroup.controls).forEach(control => {
    // 保留原有验证器
    control.setValidators(control.validator);
    // 启用nonNullable
    (control as any).nonNullable = true;
    // 若初始值为null，重置为对应类型的默认值（比如空字符串）
    if (control.value === null) {
      control.setValue('');
    }
    control.updateValueAndValidity();
  });
}

// 使用方式
makeFormGroupNonNullable(this.loginForm);

注意：该方式依赖Angular内部实现，未来版本可能存在变动，建议优先选择前两种方案。

内容的提问来源于stack exchange，提问作者Ibrahim Ali