Angular de validação personalizada para FormArray campos (Reativa Formulário)

Question 1

Eu sou novo para Angulares e gostaria de verificar como faço para ir sobre a execução de campo personalizado de validação para FormArray?

O FormArray é dinâmico, onde você pode empurrar ou remover FormGroup itens. O FormGroup consiste em campo1, campo2, campo3. Se um campo não é nulo, os outros campos devem ser definidas com validadores.necessário. O formulário será válido se todos os campos são nulos ou preenchido.

Obrigado.

Abaixo está o exemplo de código:

formA!: FormGroup;

initializeForm(): void {
    this.formA = this.fb.group({
      item1: this.fb.array([this.createItem1()]),
      item2: this.fb.array([this.createItem2()]),
    });
  }

createItem1(): FormGroup {
   return this.fb.group({
       field1: null,
       field2: null,
       field3: null,
   });
}

Question 2

Tente isso.

createItem1(): FormGroup {
  const fg = this.fb.group({
      field1: null,
      field2: null,
      field3: null,
  });
   
  const validatorFn = (control: AbstractControl): { [key: string]: any } | null => {
    const obj = fg.getRawValue();
     
    if (obj.field1 || obj.field2 || obj.field3) {
      return Validators.required(control);
    }
     
    return null;
  };
   
  for (const control of Object.values(fg.controls)) {
    control.setValidators(validatorFn);
  }

  return fg;
}

Você também vai precisar para executar updateValueAndValidity() para todos os controles quando a tecla pressionada.

N.F. · Answer 1 · 2021-11-25T00:55:40

Tente isso.

createItem1(): FormGroup {
  const fg = this.fb.group({
      field1: null,
      field2: null,
      field3: null,
  });
   
  const validatorFn = (control: AbstractControl): { [key: string]: any } | null => {
    const obj = fg.getRawValue();
     
    if (obj.field1 || obj.field2 || obj.field3) {
      return Validators.required(control);
    }
     
    return null;
  };
   
  for (const control of Object.values(fg.controls)) {
    control.setValidators(validatorFn);
  }

  return fg;
}

Você também vai precisar para executar updateValueAndValidity() para todos os controles quando a tecla pressionada.

Oi, eu encontrei o abaixo em 'fg.controles' ao tentar isso. possível para aconselhar? Tipo ' { [- chave: cadeia de caracteres]: AbstractControl; }' deve ter um " [Símbolo.iterador] () método que retorna um iterador.ts(2488)
Oi, obrigado pela ajuda. Eu fiz algumas alterações para se ajustar meu caso e acrescentou condição adicional para limpar os validadores quando não é necessária. No geral, ele trabalha para fora no final.

Angular de validação personalizada para FormArray campos (Reativa Formulário)

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria