如何为FormGroup触发Angular 5异步验证器onblur

Question

我正在使用Angular版本5.0.1而我正试图在AsyncValidator上的一个FormGroup上的模糊事件上发射FormControls上的FormGroup。

我可以使用以下代码让onBlur处理表单控件：

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

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

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

我现在唯一的另一个选择是给我们验证器的某种去抖包装器。

只是通过here阅读，似乎我应该能够使用updateOn: 'blur'作为表格组。

在新的FormGroup之后（值，{updateOn：'blur'}））; new FormControl（value，{updateOn：'blur'，asyncValidators：[myValidator]}）

Answer 1

在Angular5中，对于两种类型的形式都可以指定更新模式：template-driven forms和reactive forms。

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

Component.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

它适用于我。请注意，FormBuilder可能还不支持此功能。

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

Answer 3

你可以添加这个指令

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

Answer 4

如果有人想将this code snippet与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',
 });