How to fire Angular 5 async validator onblur for FormGroup

Question

I am using Angular version 5.0.1 and I'm trying to fire an AsyncValidator on a FormGroup on a blur event on one of the FormControls in the FormGroup.

I can get onBlur to work on a form control using the following:

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

However, when I try to apply it to a FormGroup it doesn't work.

Is it possible to only fire an AsyncValidator onBlur on a FormGroup, and if not, what is the best way to execute the validator only when the user has finished entering data?

My only other option at the moment is to us some sort of debounce wrapper for my validator.

Just reading through here and it appears I should be able to use updateOn: 'blur' for a form group.

After new FormGroup(value, {updateOn: 'blur'})); new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

score 10 · Answer 1 · edited Jan 10 '18 at 01:04

In Angular5 Specifying the update mode is possible for both types of forms: template-driven forms and reactive forms.

First one is working for you. Here's the working example for 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>

What if I want only async validator to execute in blur? And sync validators normally. — Pranjal Successena, Aug 31 '23 at 08:28

score 3 · Answer 2 · answered Nov 16 '17 at 13:34

3

It works on my side. Be aware that the FormBuilder may not support this yet.

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

answered Nov 16 '17 at 13:34

Niels Steenbeek

4,692
2
41
50

Nearly a year later FormBuilder still doesn't support it. :( – Eric Soyke Sep 19 '18 at 14:45
3

FormBuilder in angular 7.1.0 and up supports it – Jonas Gröger Feb 14 '19 at 23:33

score 2 · Answer 3 · edited Oct 28 '20 at 18:19

I use this code snippet combining AbstractControlOptions with 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'
   }
 );

score 0 · Answer 4 · answered Dec 29 '17 at 11:48

you can add this directive

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

and use it in the HTML like this

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

and in the component you can define the function myFunction as you want

How to fire Angular 5 async validator onblur for FormGroup

4 Answers4