Angular用户更新表单提交后仅修改字段有值其余为空问题求解

问题原因 #

1. 你使用了Angular响应式表单，但错误地在模板的<input>标签上通过原生value属性赋值。响应式表单的控件值完全由TS代码中的FormGroup管理，模板中写的value="{{xxx}}"不会生效，所有表单控件的初始值默认是空字符串，用户未主动修改的字段就会一直保留空值。
2. 模板中字段绑定逻辑错误：lastname输入框的value绑定了user?.firstName，firstname输入框的value绑定了user?.lastName，值的对应关系完全反了。
3. 构造提交的UserAccount对象时，没有合并原有user实例的字段，表单未覆盖的可选字段（如commercialmail、phone等）也会丢失。

解决方案 #

步骤1：调整FormGroup初始化逻辑 #

在TS代码中初始化myForm时，直接传入现有user对象的对应值作为初始值，示例代码：

// 假设你用FormBuilder初始化表单
import { FormBuilder, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}

// 拿到user数据后初始化表单
initForm() {
  this.myForm = this.fb.group({
    gender: [this.user?.genderId, Validators.required],
    lastname: [this.user?.lastName, Validators.required],
    firstname: [this.user?.firstName, Validators.required],
    username: [this.user?.userName, Validators.required],
    mail: [this.user?.mail, Validators.required],
    login: [this.user?.login, Validators.required],
    password: [this.user?.password, Validators.required],
    useraccountType: [this.user?.useraccountTypeId, Validators.required]
  })
}

步骤2：清理模板的错误属性 #

把所有<input>标签上的value属性全部删除，同时修正之前字段绑定颠倒的问题，示例调整后的输入框代码：

<div class="col-md-6">
  <label class="labels">Nom</label>
  <input type="text" class="form-control" formControlName="lastname" placeholder="Nom">
  <em *ngIf="validateControl('lastname') && hasError('lastname', 'required')">Nom obligatoire</em>
</div>
<div class="col-md-6">
  <label class="labels">Prénom</label>
  <input type="text" class="form-control" formControlName="firstname" placeholder="Prénom">
  <em *ngIf="validateControl('firstname') && hasError('firstname', 'required')">Prénom obligatoire</em>
</div>

步骤3：合并原有用户数据构造提交对象 #

提交时先展开原有user对象的所有字段，再用表单修改后的值覆盖，避免未修改字段丢失：

private executeUserAccountUpdate = (userForm) => {
  if (this.myForm.valid) {
    const formVal = this.myForm.value;
    // 合并原有数据和表单修改数据
    const user: UserAccount = {
      ...this.user,
      firstName: formVal.firstname,
      lastName: formVal.lastname,
      mail: formVal.mail,
      genderId: formVal.gender,
      password: formVal.password,
      userName: formVal.username,
      login: formVal.login,
      useraccountTypeId: formVal.useraccountType,
    }

    const apiUserAccount: string = environment.apiAddress + 'UserAccount/' + this.user.id;
    this.repository.update(apiUserAccount, user)
    .subscribe(response => {
      $('#successModal').modal();
    },
    (error =>{
      this.errorHandler.handleError(error);
      this.errorMessage = this.errorHandler.errorMessage;
    })
    )
  }
  else {
    console.log('Is not Valid');
  }
}

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