1

Olá, sou novo em angular e gostaria de saber como utilizo mais de uma validação esterna com o FormGroup. Atualmente meu código está da seguinte maneira...

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;
    }   

Tenho duas funções externas, uma é: 'ValidaNome' e a outra 'ValidaCpf'!! Porem só estou conseguindo utilizar uma das validações nessa sintax ", { validator: VwPagePersonal.validaNome });", que esta no formGroup!!

Gostaria de saber como consigo utilizar as duas funções juntas...

2
  • Você quer ter suas funções disponíveis no Validator?
    – Felipe
    5/04/2018 às 17:39
  • Sim. Basicamente gostaria de criar 2 tipos novo de validações, tipo uma customização. E utiliza-lás como se fossem validações nativas do FormGroup. Nessa sintax atual, funciona o 'validaNome', agora preciso da sintax que faça funcionar os dois metodos... 5/04/2018 às 18:19

1 Resposta 1

1

Para criar sua própria validação customizada para que seja utilizada em todos os seus códigos do projeto recomendo criar um arquivo com essas funcões que extendem o FormControl. Segue um exemplo que peguei no site que faço referência aqui.

Declaração em um arquivo

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

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

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

Chamada:

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

Caso precise apenas para uma chamada simples a este aquivo basta apenas passar suas funções para o formControl , como no exemplo abaixo que está definido aqui. no site do Angular:

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

Com a definição de função abaixo:

/** 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 que coloquei aqui apenas exemplos para que auxilie você a criar suas próprias funções.

Para o seu exemplo atual tente passar um array de validators: Assim:

this.myForm = fb.group({
            nome: new FormCotrol('',[ Validators.required,validaNome]),
} 
1
  • Cara, perfeito, funcionou legal! Muito obrigado... 5/04/2018 às 18:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .