Angulaire de validation personnalisée pour FormArray champs (Forme Réactive)

Question 1

Je suis nouveau sur Angulaire et souhaitez vérifier comment puis-je aller sur la réalisation de champ personnalisé de validation pour FormArray?

Le FormArray est dynamique où vous pouvez pousser ou supprimer FormGroup éléments. Le FormGroup se compose de champ1, champ2, champ3. Si l'un des champs n'est pas nulle, les autres champs doivent être réglées avec les validateurs.nécessaire. Le formulaire sera valable que si tous les champs sont nuls ou remplis.

Merci.

Ci-dessous l'exemple de code:

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

Essayez ceci.

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

Aussi, vous aurez besoin d'exécuter updateValueAndValidity() pour tous les contrôles lors de l'appuie sur la touche.

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

Essayez ceci.

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

Aussi, vous aurez besoin d'exécuter updateValueAndValidity() pour tous les contrôles lors de l'appuie sur la touche.

Salut, j'ai rencontré l', ci-dessous, 'fg.des contrôles lors de l'essayer. possible de conseiller? Type '{ [key: string]: AbstractControl;} "doit avoir" [Symbole.itérateur] () méthode qui renvoie un itérateur.ts(2488)
Salut, merci pour l'aide. J'ai fait quelques modifications pour s'adapter à mon cas d'utilisation, et ajouté une condition supplémentaire pour effacer les validateurs lorsqu'il n'est pas nécessaire. Dans l'ensemble, il fonctionne en fin de compte.

Angulaire de validation personnalisée pour FormArray champs (Forme Réactive)

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie