FormGroupのAngular 5非同期バリデータバリデーターonblurを呼び出す方法

Question

角度バージョン5.0.1を使用しています。FormGroupのFormControlsのいずれかのblurイベントのFormGroupにAsyncValidatorを発射しようとしています。

私はonBlurは、以下を使用して、フォームコントロール上で動作するように取得することができます。

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

しかし、私はそれが動作しないFormGroupに適用しようとします。

FormGroupにのみAsyncValidator onBlurを発動することは可能ですか？そうでない場合は、ユーザーがデータの入力を完了したときにのみバリデーターを実行する最良の方法は何ですか？

私のバリデーターのためのデバウンスラッパーのいくつかの並べ替えは私の唯一の選択肢です。

ちょうどhereを読んでいると、私はupdateOn: 'blur'をフォームグループに使用できるはずです。

の後新しいFormGroup（value、{updateOn： 'blur'}）））; 新しいFormControl（値、{updateOn： 'blur'、asyncValidators：[myValidator]}）

Answer 1

私の側で動作します。 FormBuilderはこれをまだサポートしていない可能性があることに注意してください。

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

Answer 2

あなたはこのディレクティブに

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

を追加し、この

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

のようにHTMLでそれを使用して、

をしたいなどの部品に、あなたは機能 MyFunctionをを定義することができますすることができます

Answer 3

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> 

のための作業例です。