Angular 6: Reactive Form 的 updateOn: 'submit' 提交后不更新值

Question

我正在使用 Angular 反应式表单验证和 updateOn 参数进行测试，但当我传递 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 和控制台中）。但是如果我 change/leave updateOn 默认，那么它工作正常。据我所知，值和验证应该只在提交表单后更新，但似乎没有？我在这里缺少什么？

Answer 1

您似乎忘记了将 formGroup 绑定到您的模板。 form FormGroup 使用 formGroup 指令绑定到 <form> 元素。（来源：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 是什么。

Answer 2

如果 formcontrol 与 FormGroup 关联，那么您应该使用 FormGroup 指令包装您的 from 元素，并使用 FormControlName 指令绑定输入元素

<div style="text-align:center">
    <form [formGroup]="form" novalidate (submit)="onSubmit()">
        <input type="text" formControlName="test">
        <br>Value: {{ form.get('test').value }}
        <br><button type="submit">SUBMIT</button>
    </form>
</div>

示例：https://codesandbox.io/s/angular-8pt02?fontsize=14

Answer 3

您应该使用 [formGroup] 通过 component.ts 文件的 onSubmit() 方法绑定表单的值，并使用 formControlName 绑定表格.

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

@Component({
  selector: 'app-custom-form-controls-example',
  templateUrl: './custom-form-controls-example.component.html'
})
export class CustomFormControlsExampleComponent implements OnInit {
  myForm: FormGroup

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      mySwitch: [true]
    });
  }

  submit() {
    console.log(`Value: ${this.myForm.controls.mySwitch.value}`);
  }
}

<h3>Reactive Forms</h3>
<form [formGroup]="myForm" (ngSubmit)="submit()">
  <label for="switch-2">Switch 2</label>
  <app-switch formControlName="mySwitch" id="switch-2"></app-switch>
  <button>Submit</button>
</form>

Angular 6: Reactive Form 的 updateOn: 'submit' 提交后不更新值

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

typescript

angular

angular-reactive-forms

angular6