Angular reactive form custom validation using FormBuilder

Question

I have a custom validator function named productionControlValidator.

If I set up the form like this, everything works:

this.validTest = new FormGroup({
    isdrawing: new FormControl(true),
    inventoryControl: new FormControl(null)
}, { validators: productionControlValidator });

However, if I set up the form using a form builder like this:

this.validTest = this.fb.group({
    isdrawing: true,
    inventoryControl: null
}, { validators: productionControlValidator });

where fb is defined in the constructor as private fb: FormBuilder, then the validation does not work. By "does not work", I mean that the valid property of the form is not correct, and in the console I don't see the output I expect (which does show using the first method).

Am I not defining the validator correctly in the second method (and if that is the case, how should it be defined), or is there something about FormBuilder that makes the custom validator not usable?

Akj · Accepted Answer · 2018-08-21 17:56:22Z

6

For more info ---> DEMO

Use custom validation service in component

import {CustomValidationService } from './custom.service'

this.validTest = this.fb.group({
    name: [null, [Validators.required, CustomValidationService.nameValidator],
    inventoryControl: [null, [CustomValidation]]
});

You can create custom-validation-service as:

@Injectable()
export class CustomValidationService {
    // Name validation 
        static nameValidator(control: FormControl) {
            if (control.value) {
                const matches = control.value.match(/^[A-Za-z\s]+$/);
                return matches ? null : { 'invalidName': true };
            } else {
                return null;
            }
        }
}

edited Aug 21, 2018 at 17:56

answered Aug 21, 2018 at 17:44

Akj

7,2513 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tim Over a year ago

The idea here is that I want to be able to validate the group, not the individual control. The group validator can access multiple controls to perform the validation. When setting it up with new FormGroup(..., the validator accesses everything correctly and correctly validates. I'm not looking to validate a single control.

Akj Over a year ago

but group validation is not good idea. you can not categorise the individual custom validation.

Tim Over a year ago

Why is group validation not a good idea? It is part of the official angular docs: angular.io/guide/form-validation#cross-field-validation

Chellappan வ · Accepted Answer · 2018-08-21 18:11:09Z

4

Try validator instead of validators for custom validators Documentation:https://angular.io/api/forms/AbstractControl#root

(validator ValidatorFn | null) The function that determines the synchronous validity of this control.

this.validTest = this.fb.group({
    isdrawing: true,
    inventoryControl: null
}, { validator: productionControlValidator });

answered Aug 21, 2018 at 18:11

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Comments

Shehan Nandathilaka · Accepted Answer · 2018-08-21 18:32:16Z

Form validation triggers when valueChanges in the formGroup.

Here is the example : Reactive form custom validators

We can trigger a form validation for the entire form once changing the values of the form.

Here is the example class:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  validTest: FormGroup;
  hasError = false;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.validTest = this.fb.group ({
      isdrawing: [true, [Validators.required]],
      inventoryControl: ['10', [Validators.required, Validators.pattern('[0-9]*')]]
    });

    this.validTest.valueChanges.subscribe(form => {
      if(form) {
        this.productionControlValidator(form);
      }
    });
  }

  private productionControlValidator(form) {
    // custom validations for form controls

    if(form) {
      this.hasError = this.validTest.invalid;
    }
  }
}

Example html template:

<form [formGroup]="validTest">
  <input 
    type="checkbox"
    formControlName="isdrawing"/>

    <input
      type="text"
      formControlName="inventoryControl"
    />

    <div *ngIf="hasError">Form contains errors !!!</div>
</form>

Dhivakaran Ravi · Accepted Answer · 2018-08-21 18:00:12Z

0

If you want group validation method try this as

 validateAllFormFields(formGroup: any) {         //{1}
    Object.keys(formGroup.controls).forEach(field => {  //{2}
      const control = formGroup.get(field);             //{3}
        if (control instanceof FormControl) {             //{4}
         control.markAsDirty({ onlySelf: true });
         } else if (control instanceof FormGroup) {        //{5}
         this.validateAllFormFields(control);            //{6}
      }
   });
}



save(data: any) {
    if (this.validTest.valid) {

    } else {
     this.validateAllFormFields(this.validTest);
  }
}

edited Aug 21, 2018 at 18:00

answered Aug 21, 2018 at 17:52

Dhivakaran Ravi

3612 silver badges8 bronze badges

Comments

Sai siva · Accepted Answer · 2019-11-15 07:17:50Z

-4

Basically in Angular form Validations are Easy Part.

in app.component.ts file:

you need to add

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

After That

ngOnInit() {

this.registerForm = this.formBuilder.group({

  email: ['', [Validators.required, Validators.email]],

  firstName: ['', Validators.required],

  lastName:['', Validators.required],

  address: ['', Validators.required],

})

}

That's it. Happy coding

edited Nov 15, 2019 at 7:17

answered Oct 30, 2019 at 11:07

Sai siva

133 bronze badges

1 Comment

Lenzman Over a year ago

The question was adding custom validators

Collectives™ on Stack Overflow

Angular reactive form custom validation using FormBuilder

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related