Angular响应式表单动态赋值后验证失效，提交存空值问题求助

Hey there! I see exactly what's going on here. The issue is that you're using the value attribute to set the input values in your parent component's form, but that only updates the DOM display—it doesn't actually sync those values to the Angular FormControl instances that power your reactive form. That's why when you submit, the form thinks the fields are empty even though you see text in the inputs.

核心问题分析 #

Angular的响应式表单依赖于你在signupForm中创建的FormControl对象来追踪值、验证状态和变更。当你使用value={{edited_values}}时，相当于绕过了这个表单系统，直接修改了输入框的DOM值，而Angular的表单控件并不会监听这种手动修改。

解决方案步骤 #

我们通过直接更新表单控件来修复这个问题，而不是操作DOM：

1. 移除父组件HTML中的value属性

首先，删除表单输入框中所有value={{edited_valuesX}}属性。formControlName指令已经处理了输入框显示与表单控件值的同步，所以我们不需要手动绑定value。

修改后的父组件表单输入示例：

<div class="form-group">
  <input type="text" formControlName='fname' placeholder="your First name">
</div>

对lname、email和userpassword输入框做同样的修改。

2. 更新父组件的回调方法，用patchValue同步表单值

不要只是将子组件传递的值存储在类属性中，使用Angular的patchValue方法来更新signupForm中对应的FormControl。这样能确保表单识别到这些值，保持所有数据同步。

修改后的父组件TS方法：

getMessage(message: string) {
  this.signupForm.patchValue({
    fname: message
  });
}

getMessage1(message1: string) {
  this.signupForm.patchValue({
    lname: message1
  });
}

getMessage2(message2: string) {
  this.signupForm.patchValue({
    email: message2
  });
}

getMessage3(message3: string) {
  this.signupForm.patchValue({
    userpassword: message3
  });
}

（可选）优化子组件的事件传递（更简洁的写法）

使用四个独立的EventEmitter有点冗余，你可以通过传递一个包含所有用户数据的对象来简化代码：

子组件TS修改：

@Output() userUpdated = new EventEmitter<{f: string, l: string, e: string, p: string}>();

save(selectedItem: any, index: number) {
  this.userUpdated.emit(selectedItem);
}

父组件HTML修改：

<app-edit (userUpdated)="onUserUpdated($event)"></app-edit>

父组件TS新增方法：

onUserUpdated(userData: {f: string, l: string, e: string, p: string}) {
  this.signupForm.patchValue({
    fname: userData.f,
    lname: userData.l,
    email: userData.e,
    userpassword: userData.p
  });
}

这种写法能让你的代码更整洁，也更易于维护。

为什么这样有效？ #

当你调用FormGroup的patchValue方法时，你直接更新了底层FormControl的值。Angular的响应式表单系统会自动将这些值同步到输入框（得益于formControlName指令），并为提交追踪这些值——这样当你提交表单时，就能正确获取到子组件传递的数据了。

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