Angular响应式表单类型错误咨询：规范写法下的报错问题

我从某本书中获取了一段Angular代码，它将FormGroup的初始化放在ngOnInit()方法中，并用非空断言符!跳过类型检查，这种写法本质是规避核心问题而非真正解决。

原代码（规避类型检查的写法） #

export class CityEditComponent implements OnInit {
  // 表单模型
  form! : FormGroup

  ngOnInit() {
    this.loadData();
    this.form = new FormGroup({
     name: new FormControl(''),
     lat: new FormControl(''),
     lon: new FormControl('')
    });
  }
}

规范写法及报错情况 #

我尝试改成更规范的类初始化时创建FormGroup的写法，但出现了多个类型报错：

City接口定义 #

export interface City {
  id: number;
  name: string;
  lat: number;
  lon: number;
}

组件代码（存在报错） #

export class CityEditComponent implements OnInit {
  // 表单模型
  form = new FormGroup({
    name: new FormControl(''),
    lat: new FormControl(''),
    lon: new FormControl('')
  });

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    // 从后端获取city对象...
    // 用city值更新表单 -> 报错：city.lat是数字类型，表单控件lat为字符串类型
    this.form.patchValue(this.city);
  };

  onSubmit() {
    var city = this.city;
    if (city) {
      // 报错：city.name为非空字符串，但表单控件name的值可能为null
      city.name = this.form.controls['name'].value;
      // 报错：Object is possibly null
      city.lat = +this.form.controls['lat'].value;
      city.lon = +this.form.controls['lon'].value;
    }
  }
}

报错解决方法 #

1. 解决表单控件与City字段的类型不匹配问题 #

当用patchValue更新表单时，City的lat/lon是数字类型，而表单控件默认初始化为字符串类型，可通过两种方式处理：

• 方式一：转换类型后再更新表单
  在patchValue时将数字转为字符串：

  this.form.patchValue({
    ...this.city,
    lat: this.city.lat.toString(),
    lon: this.city.lon.toString()
  });
  

• 方式二：给FormControl指定明确类型
  利用FormControl的泛型特性，声明控件值类型，同时开启nonNullable: true确保值不会为null：

  form = new FormGroup({
    name: new FormControl<string>('', { nonNullable: true }),
    lat: new FormControl<string>('', { nonNullable: true }),
    lon: new FormControl<string>('', { nonNullable: true })
  });
  

2. 解决表单值可能为null的问题 #

开启nonNullable: true后，FormControl的value将不再是string | null类型，而是确定的string类型，直接赋值给city.name就不会报错。

3. 安全转换表单值为数字类型 #

在onSubmit中，先获取表单的原始值（因为开启了nonNullable，值都不为空），再用Number()安全转换为数字：

onSubmit() {
  const formValue = this.form.getRawValue();
  if (this.city) {
    this.city.name = formValue.name;
    this.city.lat = Number(formValue.lat);
    this.city.lon = Number(formValue.lon);
  }
}

内容的提问来源于stack exchange，提问作者Bassel Elsheikh