Angular 6 : Reactive Form's updateOn: 'submit' is not updating value after submitting

我正在使用updateOn参数对Angular react 形式验证进行测试，但是当我传递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更改/保留为默认值，则可以正常工作。从我的 Angular 来看，值和验证仅应在提交表单后更新，但似乎没有？我在这里想念的是什么？

最佳答案

您似乎忘记了将formGroup绑定(bind)到模板。 form FormGroup通过<form>指令绑定(bind)到formGroup元素。 (来源:docs)

<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是什么。