Angular 6：Reactive Form 的 updateOn：提交后“提交”不更新值

Question

我正在使用带updateOn参数的Angular 反应式表单验证进行测试，但似乎即使是最简单的表单在我通过时也无法正常工作updateOn: 'submit'（其他值工作正常）。

app.component.html：

<form novalidate (submit)="onSubmit()">
  <input type="text" [formControl]="form.get('test')">

  Value: {{ form.get('test').value }}

  <button type="submit">SUBMIT</button>
</form>

app.component.ts:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  public form = new FormGroup({
    test: new FormControl('', { validators: [Validators.required], updateOn: 'submit'}),
  });

  public onSubmit(): void {
    console.log('Submitted:');
    console.log(this.form.value); // Got: Object { test: "" }
  }
}

完整和工作代码：https : //codesandbox.io/s/67pmd

单击按钮后我得到的是空字段值（在 html 和控制台中）。但是，如果我更改/保留updateOn为默认值，则它工作正常。从我看来，只有在提交表单后才应该更新值和验证，但似乎没有？我在这里缺少什么？

Answer 1

您似乎忘记将您的模板绑定formGroup到您的模板上。FormGroup通过指令form绑定到元素。（来源：文档）<form>formGroup

<form [formGroup]="form" novalidate (submit)="onSubmit()">
    <input type="text" [formControl]="form.get('test')">
    Value: {{ form.get('test').value }}
    <button type="submit">SUBMIT</button>
</form>

编辑blur： 和等其他值change可以正常工作的原因updateOn是，blur提交change时根据您的输入触发的事件是在提交表单本身时触发的事件。要知道表单何时提交，Angular 需要知道表单formGroup是什么。