如何在 FormGroup 的模糊中触发 Angular 5 异步验证器

Question

我正在使用 Angular 版本 5.0.1，我正在尝试在FormGroup中的一个FormControls的模糊事件上在FormGroup上触发AsyncValidator。

我可以使用以下命令让onBlur处理窗体控件：

name: ['', {updateOn: 'blur'}]

但是，当我尝试将其应用于FormGroup时，它不起作用。

是否可以只在FormGroup上触发AsyncValidator onBlur，如果不能，仅在用户完成输入数据时才执行验证器的最佳方法是什么？

我目前唯一的其他选择是为我的验证器提供某种去抖动包装器。

只是通读这里，似乎我应该能够将updateOn: 'blur'用于表单组。

后 new FormGroup（value， {updateOn： 'blur'}））; new FormControl（value， {updateOn： 'blur'， asyncValidators： [myValidator]}）

Answer 1

在Angular5 可以为两种类型的表单指定更新模式：template-driven forms 和 reactive forms 。

第一个是为你工作。这是反应式表单的工作示例

组件.ts

 import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, Validators } from '@angular/forms';
    @Component({
      selector: 'form01',
      templateUrl: './student.component.html',
      styleUrls: ['./student.component.scss']
    })
    export class StudentComponent implements OnInit {
    formTitle:string="Student registration ";
    nameForm: FormGroup;
    constructor() {
    }
    ngOnInit() {
      this.nameForm = new FormGroup ({
        firstname: new FormControl('', {
          validators: Validators.required,
          asyncValidators: [yourAsyncValidatorFunction],
          updateOn: 'blur'
        }),
        lastname: new FormControl('', {
          validators: Validators.required,
          asyncValidators: [yourAsyncValidatorFunction],
          updateOn: 'blur'
        })
      });
    }
    }

.HTML

<form [formGroup]="nameForm" novalidate>
  <div class="form-group">
    <label>What's your first name? </label>
    <input class="form-control" formControlName="firstname">
  </div>
  <div class="form-group">
    <label>What's your last name?</label>
    <input class="form-control" formControlName="lastname">
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>
  <h3>Hello {{nameForm.value.firstname}} {{nameForm.value.lastname}}</h3>

Answer 2

它对我这边有效。请注意，表单构建器可能还不支持此功能。

this.formGroup = new FormGroup({
  name: new FormControl('', {validators: []})
}, {
  updateOn: 'blur'
});

Answer 3

我使用此代码片段将AbstractControlOptions与FormBuilder相结合：

 constructor(private formBuilder: FormBuilder) { }
 
 this.signUpForm = new FormGroup(
   this.formBuilder.group({
     'email':    ['', ValidationUtils.emailValidators()],
     'fullname': ['', ValidationUtils.fullnameValidators()],
     'idCard':   ['', ValidationUtils.idCardValidators()],
     'username': {value: '', disabled: true}
   }).controls, {
     updateOn: 'blur'
   }
 );

Answer 4

您可以

添加此指令

import { Directive,Output, HostListener, EventEmitter } from '@angular/core';
@Directive({
  selector: '[onBlur]'
})
export class OnBlurDirective {
  // @Input('onBlur') onBlurFunction: Function;
  @Output('onBlur') onBlurEvent: EventEmitter<any> = new EventEmitter();
  constructor() { }
  @HostListener('focusout', ['$event.target'])
  onFocusout(target) {
    console.log("Focus out called");
    this.onBlurEvent.emit()
  }
}

并像这样在 HTML 中使用它

<input type="text" (onBlur)="myFunction()"/>

在组件中，您可以根据需要定义函数myFunction。