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绑定到模板。 form FormGroup通过<form>指令绑定到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是基于提交时触发的事件，而Submit是一个提交表单本身时触发的事件。要知道何时提交表单，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]通过onSubmit()文件的component.ts方法绑定表单的值，并使用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>

For Reference

角度6：反应式表单的updateOn：“提交”未在提交后更新值

3 个答案: