web-dev-qa-db-fra.com

Créer un groupe de formulaires désactivé avec FormBuilder

Disons que nous avons myFormGroup qui est initialisé via FormBuilder:

this.myFormGroup = this.fb.group(
  {
    field1: ['', SomeValidator1],
    field2: ['', AnotherValidator2],
    field3: [''],
    ...
  }
);

Je suis conscient que nous pouvons désactiver un contrôle de formulaire particulier, par exemple:

fb.control({value: 'my val', disabled: true});

Bien sûr, je peux utiliser cette syntaxe dans mon exemple et marquer comme désactivé chaque contrôle unique du groupe. Mais le groupe de formulaires peut avoir beaucoup de contrôles.

Donc la question - est-il possible de désactiver FormGroup/FormArray entier lors de la création (pas après) via FormBuilder?

p.s. La raison pour laquelle je pose cette question est parce que j'ai besoin d'initialiser conditionnellement un groupe de formulaires avec des champs actifs ou désactivés pour différents types de privilèges utilisateur.

angularangular-reactive-formsangular-forms
10
shohrukh

essayer:

this.myFormGroup = this.fb.group(
  {
    field1: [{ value: '', disabled: true }, SomeValidator1],
    field2: [{ value:'', disabled: true }, AnotherValidator2],
    field3: [{ value:'', disabled: true}],
    ...
  }
);
5
Luis Felipe Diaz Valbuena

Tu peux appeler FormGroup.disable immédiatement après l'avoir créé avec une petite aide:

const disableFormGroup = (fg: FormGroup) => {fg.disable(); return fg}

form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: disableFormGroup(this.fb.group({
        new: ['', Validators.required],
        confirm: ''
    }))
})
1
Klaster_1

Essayez ce code:

enableForm(group: FormGroup, enable:boolean) {
   for (const i in group.controls) {
      if(enable) {
        group.controls[i].enable();
      } else {
        group.controls[i].disable();
      }
   }
}
1
Mukesh Kumar

Vous pouvez également essayer ceci pour désactiver et activer le contrôle de formulaire de manière dynamique

this.contactInfo = this.fb.group({
      email: ['', Validators.required],
      phone: ['', Validators.required]
    });
//disable form: only phone control
this.contactInfo.get('phone').disable();

//enable form :phone control
this.contactInfo.get('phone').enable();
0
Baraka Ally