Angular 5中第二次提交时文本字段返回null问题求助

看起来你遇到的问题是表单重置后，mat-autocomplete对应的字段变成了null，这时候调用.trim()自然就会抛出错误啦。第一次操作正常是因为初始状态下字段可能是空字符串（或者有默认值），但重置表单后如果没给控件设置默认值，Angular会把值设为null，第二次操作时就触发了这个错误。

我给你几个可行的解决思路：

1. 给表单控件设置初始空字符串值 #

在初始化表单的时候，把需要调用trim()的字段默认值设为空字符串，这样重置后就不会变成null了：

// 组件里的表单初始化代码示例
this.filterForm = this.fb.group({
  autocompleteField1: [''], // 初始空字符串
  autocompleteField2: [''],
  // 其他复选框字段...
});

2. 调用trim()前先做非空判断 #

在处理字段值的时候，先检查值是否存在（不是null或undefined），再调用trim()：

onApplyFilter() {
  const formValues = this.filterForm.value;
  const filterObj = {};

  // 处理第一个自动完成字段
  if (formValues.autocompleteField1) {
    filterObj['field1'] = formValues.autocompleteField1.trim();
  }
  // 处理第二个自动完成字段
  if (formValues.autocompleteField2) {
    filterObj['field2'] = formValues.autocompleteField2.trim();
  }
  // 处理复选框字段...

  // 只有当filterObj有内容时再推入数组
  if (Object.keys(filterObj).length > 0) {
    this.filterArray.push(filterObj);
  }

  // 重置表单
  this.filterForm.reset();
}

3. 使用可选链+空值合并操作符简化判断 #

如果你用的是较新的TypeScript/JavaScript版本，可以用?.和??来简化代码，避免手动判断：

// 若需要保留空字符串则用这个写法
filterObj['field1'] = formValues.autocompleteField1?.trim() ?? '';
// 若空值不需要存入对象，结合判断更合理
if (formValues.autocompleteField1?.trim()) {
  filterObj['field1'] = formValues.autocompleteField1.trim();
}

另外还要注意，form.reset()方法如果不传参数，会把控件值重置为初始状态。如果你想在重置时保持某些默认值，也可以给reset()传参：

this.filterForm.reset({
  autocompleteField1: '',
  autocompleteField2: '',
  // 复选框可以设为false之类的默认值
});

这样应该就能解决第二次操作时的null调用trim()的问题啦！

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