Angular de validación personalizada para FormArray campos (Forma Reactiva)

Question 1

Soy nuevo en Angular, y quiere saber cómo hago para realizar personalizado de validación de campo para FormArray?

El FormArray es dinámico donde se puede empujar o quitar FormGroup elementos. El FormGroup consta de campo1, campo2, campo3. Si el campo no es nulo, el resto de los campos se debe establecer con los validadores.necesario. El formulario será válido si todos los campos son nulos o lleno.

Gracias.

A continuación está el código de ejemplo:

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

Intenta esto.

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

También usted tendrá que ejecutar updateValueAndValidity() para todos los controles cuando la tecla pulsada.

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

Intenta esto.

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

También usted tendrá que ejecutar updateValueAndValidity() para todos los controles cuando la tecla pulsada.

Hola, me he encontrado con el siguiente en 'fg.los controles cuando se trata esto. posible aconsejar? Tipo '{ [clave: string]: AbstractControl; }' debe tener un " Símbolo.iterador] () método que devuelve un iterador.ts(2488)
Hola, gracias por la ayuda. Hice algunos cambios para que se adapte a mi caso de uso y añadió condición adicional para borrar los validadores cuando no es necesario. En general, se trabaja en la final.

Angular de validación personalizada para FormArray campos (Forma Reactiva)

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría