Angular FormGroup

Question

Angular FormGroup

Navigation

#1 by (0 votes)

1

Hello, I'm new to angular and would like to know how I use more of an external validation with FormGroup. Currently my code is as follows ...

constructor(fb: FormBuilder, public router: Router){
        //Grupo de formulario - Validações
        this.myForm = fb.group({
            nome: ['', Validators.required ],
            email: ['', Validators.compose([Validators.required, Validators.pattern(this.emailPattern)])],
            cpf: ['', Validators.required ],
            telefone: ['', Validators.required],
            cep: ['', Validators.required]
        }, { validator: VwPagePersonal.validaNome });
    }

    //Validações customizadas
    static validaNome(group: AbstractControl): {[Key: string]: boolean} {
        const nome = group.get('nome');

        if(!nome){
            return undefined;
        }

        var regexp = /\b[^\d\s]+\b/g;
        var count = 0;
        while (regexp.exec(nome.value))++count;

        if (count === 1) {
            return { nomeInvalid:true }    
        }

        return undefined;    
    }

    static validaCpf(group: AbstractControl): {[Key: string]: boolean} {
        const cpf = group.get('cpf').value;

        if(cpf === 1){
            return { nomeInvalid:true }    
        }

        return undefined;
    }

I have two external functions, one is: 'ValidaName' and the other 'ValidaCpf' !! However I am only able to use one of the validations in this syntax, " { validator: VwPagePersonal.validaNome }); ", which is in the formGroup !!

I would like to know how I can use both functions together ...

javascript typescript angular

asked by anonymous 05.04.2018 / 19:24

1 answer

StoredProcedure in SQL Server by passing a C # Add cascading data from one column in Access with Status by Line

score 0 · Accepted Answer

To create your own custom validation for everyone to use your project tags a file with these functions that extend the FormControl. Here is an example I took on the site I refer to here >.

Declaration to a file

import { FormControl } from '@angular/forms';

function validateEmail(c: FormControl) {
  let EMAIL_REGEXP = ...

  return EMAIL_REGEXP.test(c.value) ? null : {
    validateEmail: {
      valid: false
    }
  };
}

Call:

this.form = new FormGroup({
    ...
    email: new FormControl('', [
      Validators.required,
      validateEmail
    ])
  });

If you need only a simple call to this file, just pass your functions to formControl, as in the example below that is defined here . on the Angular site:

this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });

With the function definition below:

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

Note that I've just put examples here to help you create their own functions.

For your current example try passing an array of validators: So:

this.myForm = fb.group({
            nome: new FormCotrol('',[ Validators.required,validaNome]),
}