如何在 Angular 中提交表单操作后触发验证并获取验证结果？

Question

我有这个表单组：

this.form = this.fb.group({
  id: [],
  active: [true],
  name: [''],
});

和这个提交表单函数：

onSubmit(submitForm: FormGroup) {
  this.submitForm.controls['name'].setValidators([MyValidators.unique(`name`, () => {
     return this.service.checkNameUnique(this.submitForm.value.name, this.labelFg.value.id);
  })]);
}

我在启动时没有对表单设置验证，因为这个表单只有在我点击提交按钮后才会被验证。所以我使用 setValidators 函数在 onSubmit 函数中设置验证。

但问题是：如何触发此验证并获得验证结果？

Answer 1

试试这个

  this.submitForm.controls['name'].setValidators([MyValidators.unique(`name`, () => {
     return this.service.checkNameUnique(this.submitForm.value.name, this.labelFg.value.id);
  })]);
this.submitForm.controls["name"].updateValueAndValidity();

angular-setvalidators

更新查看此 blog 以获得有关 angular 异步验证器

的最佳示例

Answer 2

Disclamer 正如安德鲁所说，从 Angular 8 开始，可以使用 {updateOn:'submit'} 使用 formBuilder，不便之处，敬请谅解。

您可以使用 FormGroup 和 Form 控件的“构造函数”，~~不是 formBuilder~~)，然后您可以添加 {updateOn:'submit'}，请参阅文档: forms validation

this.form = new FormGroup({
  id: new FormControl('',Validators.required),
  active: new FormControl(true,Validators.requiredTrue),
  name: new FormControl('',
        {validators:Validators.required,
         asyncValidators:MyValidators),
},{updateOn:'submit'});

是的，只能使用 FormGroup 的构造函数来完成，但是您可以看到使用 FormBuilder

并没有太大区别

更新一个stackblitz example

Answer 3

没有什么能阻止您使用 FormBuilder API and passing AbstractControlOptions。您可以将这些选项传递给控件 and/or 组。

this.formGroup = this.fb.group({
  id: ['', [Validators.required]],
  name: ['', {validators: ..., asyncValidators: ..., updateOn: ...}],
}, { updateOn: 'submit' });

Stackblitz

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

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
      <input type="text" placeholder="Id" formControlName="id" />
      <input type="text" placeholder="Name" formControlName="name" />

      <br/>
      <br/>
    <h3>Value</h3>
      {{ formGroup.value | json }}
    <h3>Valid</h3>
      {{ formGroup.valid | json }}

      <br/>
      <br/>
    <button type="submit" >Submit</button>

  </form>
  `
})
export class AppComponent  {
  formGroup: FormGroup

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formGroup = this.fb.group({
      id: ['', [Validators.required]],
      name: [''],
    }, { updateOn: 'submit' });
  }

  onSubmit() {
    console.log('onSubmit')
    console.log(this.formGroup.value)
    console.log(this.formGroup.valid)
  }
}

如何在 Angular 中提交表单操作后触发验证并获取验证结果？

how to trigger validation and get validation result after submit form action in Angular?

forms

angular

angular2-form-validation

Stackblitz