Angular表单赋值后显示正常但ngForm值为空、表单无效问题

问题原因 #

Angular 模板驱动表单中，NgModel 指令负责维护表单控件与ngForm对象的状态同步，你仅给原生value属性赋值只会修改DOM层的展示内容，不会触发NgModel的状态更新，因此ngForm中对应字段始终为空，必填校验不通过导致表单状态为INVALID。

解决方案 #

1. 修改HTML模板代码 #

将所有表单控件的原生value绑定替换为ngModel双向绑定，同时把firstname的原生输入事件替换为Angular事件，保证修改可以同步到表单状态：

<form #editForm="ngForm" (ngSubmit)="onSubmit(editForm)" novalidate autocomplete="off">
    <!-- sysid如果不需要参与表单校验，可以加[ngModelOptions]="{standalone: true}"，避免被计入表单字段 -->
    <input type="text" name="sysid" id="sysid" readonly [ngModel]="userList.sysid">
    <div class="form-group row">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" placeholder="Enter username" name="username" #username="ngModel" ngModel required [class.invalid]="username.invalid" aria-describedby="unameErr" [(ngModel)]="userList.username">
            <small *ngIf="username.invalid" id="unameErr" class="form-text">Username is Required</small>
        </div>
        <div class="col-sm-6">
            <label for="firstname">First Name</label>
            <input type="text" class="form-control" id="firstname" placeholder="Enter First Name" name="firstname" #firstname="ngModel" ngModel required [class.invalid]="firstname.invalid" aria-describedby="fnameErr" [(ngModel)]="userList.firstname" (input)="handleFirstnameInput($event)">
            <small *ngIf="firstname.invalid" id="fnameErr" class="form-text">First Name is Required</small>
        </div>
    </div>
    <input type="submit" class="btn btn-primary" value="Save" [disabled]="editForm.invalid">
</form>

2. 修改TypeScript代码 #

新增firstname大写转换的处理方法：

ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.formId = +params['formId']; // (+) converts string 'id' to a number
    });

    this.userList = {
      sysid: "",
      username: "",
      firstname: ""
    }

    this.getUserByIdnew(this.formId);
  }

 getUserByIdnew(formSysid: number) {
    this.apiservice.getUserbyIdnew(formSysid).subscribe((data: any) => {
      this.userList = {
        sysid: data.sysid,
        username: data.username,
        firstname: data.fname
      }
    })
  }

// 新增firstname输入大写转换方法
handleFirstnameInput(event: Event) {
  const inputEl = event.target as HTMLInputElement;
  this.userList.firstname = inputEl.value.toUpperCase();
}

onSubmit(form: NgForm) {
    console.log(form);
  }

}

修改完成后，接口返回的userList数据会自动同步到NgModel，表单对应字段会被自动赋值，校验通过后表单状态就会变为VALID，提交时即可正常拿到所有表单字段值。

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