angular - 在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

Disclamer正如 andrew 所说，从 Angular 8 开始，可以{updateOn:'submit'}使用 formBuilder 来解决不便之处。

您可以使用 FormGroup 和 Form 控件的“构造函数”，而不是 formBuilder），然后您可以添加 {updateOn:'submit'}，请参阅文档：表单验证

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 示例

Answer 2

尝试这个

  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();

角度集验证器

更新 查看此博客以获取有关角度异步验证器的最佳示例

Answer 3

没有什么可以阻止您使用FormBuilder API 并传递AbstractControlOptions。您可以将这些选项传递给控件和/或组。

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

堆栈闪电战

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)
  }
}