web-dev-qa-db-fra.com

Comment désactiver tous les contrôles de formulaire au sein d'un groupe de formulaires

j'ai cette structure de formulaire Angular réactive

myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;

ngOnInit(): void {
    this.createFormControls();
        this.createForm();

  }

createFormControls() { 

this.FIRST_NAME = new FormControl('',[Validators.required]);
this.LAST_NAME = new FormControl('',[Validators.required]);

}

createForm(): void
{
    this.myForm = this.fb.group({
                      Personal:this.fb.group({
                            FIRST_NAME:this.FIRST_NAME,
                            LAST_NAME:this.LAST_NAME,
                        })
                 })
}

si je fais

this.FIRST_NAME.disable

il désactive le FormControl

comment désactiver tous les FormControls dans Personal FormGroup 

angularangular-reactive-formsformgroups
5
Ankit Raonka

Si vous souhaitez désactiver le groupe, vous devez indiquer ce qu'est le this.Personal. Maintenant, vous venez de le déclarer en tant que groupe de formulaires, rien d'autre.

Donc vous pouvez le faire après construire le formulaire:

this.Personal = this.myForm.get('Personal')

Ensuite, vous pouvez simplement le désactiver avec:

this.Personal.disable();

DEMO: http://plnkr.co/edit/QAhY6A9950jqrgzvjVKu?p=preview

5
AJT_82

vous pouvez désactiver le contrôle comme ça. donc votre créateur de formulaire devrait être comme 

 createForm(): void
    {
        this.myForm = this.fb.group({
                          Personal:this.fb.group({
                                FIRST_NAME:{value:this.FIRST_NAME,, disabled: true},
                                LAST_NAME:this.LAST_NAME,
                            })
                     })
    }

et puis si vous voulez activer/désactiver. utiliser la méthode suivante

 this.myForm.get('Personal.FIRST_NAME').disable();
 this.myForm.get('Personal.FIRST_NAME').enable();
4
Shailesh Ladumor

Une solution simple:

<fieldset [disabled]="!frmCheckout.get('id').value">
    ... All controls inside will apply disabled rules ...
</fieldset>
2
Rodolfo Jorge Nemer Nogueira

Vous pouvez désactiver le formulaire entier this.Personal.disable();

ou vous pouvez énumérer tous les contrôles de formulaire et les activer/désactiver un par un

for (var control in this.Personal.controls) {
  this.Personal.controls[control].disable();
}
1
Martin Vich

Compte tenu de la forme suivante:

this.myForm = this.fb.group({
  personal: this.fb.group({
    firstName: null,
    lastName: null
  })
});

A) Si vous souhaitez activer/désactiver par programme le groupe de formulaires personal, comme le dit la réponse déjà acceptée, vous pouvez utiliser group.disable()/group.enable(). Cependant, je voudrais mentionner l'importance de l'argument des options:

this.myForm.get('personal').disable({ emitEvent: false });
this.myForm.get('personal').enable({ emitEvent: false });

L'argument d'options { emitEvent: false } est facultatif, bien sûr. Parfois, vous voudrez peut-être que le formulaire émette l'événement, mais parfois non.
Cela est nécessaire si vous effectuez le basculement entre désactivé/activé dans un myForm.valueChanges.subscribe(), car vous devez parfois activer/désactiver différents contrôles/groupes en fonction de la valeur/de l’état d’autres contrôles dans le même formulaire. Sans { emitEvent: false }, cela provoquerait une boucle sans fin.

B) Si vous voulez le désactiver à l'initialisation, vous devez initialiser tous ses contrôles pour le désactiver. Le groupe de formulaires suivant serait désactivé dès le début:

this.myForm = this.fb.group({
  personal: this.fb.group({
    firstName: [ { value: null, disabled: true }, Validators.required ],
    lastName: [ { value: null, disabled: true }, Validators.required ],
    email: [ { value: null, disabled: true }, [ Validators.required, Validators.email ] ],
    birthDate: { value: null, disabled: true }
  })
});

console.log(this.myForm.get('personal').disabled); // This will output "true"

J'ai également ajouté les validateurs à titre d'exemple, au cas où quelqu'un se poserait la question: nous n'avons pas à nous soucier des validateurs lorsqu'un contrôle est désactivé, la validation est ignorée. 

0
MrCroft