Angular 8表单为何无法读取属性绑定的输入值？

这个问题我之前也碰到过，本质是Angular的ngModel和原生DOM的value属性工作机制不一样导致的，咱们一步步来解决：

问题原因 #

你用[value]="expression"只是把值渲染到了输入框的DOM元素上，但并没有同步到ngModel维护的表单模型中。ngModel是Angular表单体系的一部分，它有自己的内部状态管理，直接修改DOM的value不会触发模型的更新，所以提交时自然拿不到值。

解决方案 #

方案1：用ngModel绑定组件类变量（推荐） #

把计算expression的逻辑移到组件类中，然后通过ngModel绑定这个变量，这样模型和视图会同步：

组件类代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 定义用于绑定的变量
  inputValue: number;

  ngOnInit() {
    // 在这里计算你的expression并赋值
    // 举个例子，比如expression是10 + 20
    this.inputValue = 10 + 20;
  }

  // 提交表单的方法
  onSubmit(formValue: any) {
    console.log(formValue); // 现在就能拿到正确的值了
  }
}

模板代码

<form (ngSubmit)="onSubmit(myForm.value)" #myForm="ngForm">
  <input type="number" [name]="x" [(ngModel)]="inputValue" />
  <button type="submit">提交</button>
</form>

方案2：直接在模板中用[ngModel]绑定表达式 #

如果不想在组件类中处理变量，也可以直接把expression绑定到[ngModel]上，这样Angular会自动把值同步到模型中：

<input type="number" [name]="x" [ngModel]="expression" />

注意：这种是单向绑定，用户修改输入框的值不会同步回你的expression（如果expression是组件变量的话），如果需要双向同步还是用[(ngModel)]。

关键注意点 #

• 不要同时使用[value]和ngModel，这两个会产生冲突，Angular的表单体系优先处理ngModel，直接设置[value]不会被ngModel识别。
• 确保[name]="x"中的x是一个有效的字符串变量，表单控件需要唯一的name属性才能被正确注册到表单模型中。

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