Angular必填验证异常：预填充表单需编辑才判定有效

看起来你遇到的是Angular Reactive Forms的常见坑——结合你的代码来看，问题根源有两个：一是混用了Reactive Forms的formControlName和原生[value]绑定，导致表单控件的模型值与显示值不一致；二是代码预填充值时，控件默认不会自动标记为dirty/touched，影响了表单验证状态的更新。

第一步：修复输入框的绑定冲突 #

你的输入框同时使用了[formControlName]="question.key"和[value]="question.value"，这会造成逻辑冲突！Reactive Forms要求通过FormControl实例管理值，而非原生[value]属性。页面上显示的预填充值只是DOM层面的，FormControl的实际模型值仍为空，这就导致必填验证看似满足但实际不通过。

先移除输入框里的[value]="question.value"：

<input matInput 
       [placeholder]="question.placeholder" 
       [id]="question.key" 
       [maxLength]="question.maxLength" 
       [formControlName]="question.key" 
       type="email" 
       [required]="question.required"
       [readonly]="question.readonly" 
       (keyup)="checkValue($event, question)" 
       (paste)="checkPasteValue($event, question)">

第二步：正确预填充表单值 #

在你的editSectionDataItem方法中，拿到解码后的decodedItem数据后，需要通过Reactive Forms的patchValue方法设置表单值，而非直接通过模板绑定：

editSectionDataItem(item: any) {
  var me = this;
  var decodedItem = this.originalData.filter(function (originalItem) {
    return originalItem.id == item.id;
  });
  console.log(decodedItem, item);
  
  // 处理预填充数据并同步到表单
  const prefilledData = flattenJSON(decodedItem[0]);
  this.dataEntryForm.patchValue(prefilledData);
  
  // 手动标记表单为dirty和touched，触发验证状态更新
  this.dataEntryForm.markAsDirty();
  this.dataEntryForm.markAsTouched();

  var mission = {
    widgetConfig: this.widgetConfig,
    settings: this.settings,
    fields: this.fields,
    isEditMode: true,
    data: prefilledData
  }
  console.log(mission);
  this._widgetService.missionToOpenDataEntryForm(mission);
}

第三步：确保验证状态同步更新 #

调用markAsDirty()和markAsTouched()是关键——Angular默认不会把代码设置的值视为用户输入，因此不会自动更新这些状态。手动标记后，表单会重新计算验证状态，只要预填充的值满足必填条件，dataEntryForm.valid就会变为true，按钮也就自动启用了。

备选方案：针对单个控件操作 #

如果你只想更新邮箱这一个控件的状态，可以单独操作：

// 设置单个控件值
this.dataEntryForm.get(question.key)?.setValue(prefilledData[question.key]);
// 标记单个控件为dirty/touched
this.dataEntryForm.get(question.key)?.markAsDirty();
this.dataEntryForm.get(question.key)?.markAsTouched();

这样调整后，预填充的表单值会正确同步到FormControl模型中，验证状态也会及时更新，按钮无需用户手动输入就能启用。

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