web-dev-qa-db-fra.com

Utiliser la désactivation avec un formulaire piloté par modèle

J'essaie d'utiliser le disabled à l'intérieur de mon formulaire piloté par modèle. J'ai le formulaire suivant:

this.form = this.formBuilder.group({
    val1: ['', Validators.required],
    val2: [{value:'', disabled:this.form.controls.val1.valid}]
});

Je reçois une erreur (je ne trouve pas controls sur this.form) probablement parce que j'utilise this.form à l'intérieur this.form.

Comment puis-je résoudre ce problème?

PS J'ai aussi essayé d'ajouter [disabled]='...' à l'intérieur de mon html mais je reçois un avertissement disant que je devrais utiliser le formBuilder à la place

angularangular2-formsangular2-formbuilder
20
ncohen

Oui, vous avez raison, le problème vient du fait que vous faites référence à une variable (this.form) lorsqu'il n'est pas encore lancé. Heureusement, dans votre cas, vous n'avez pas vraiment besoin de vous référer au groupe de formulaires dans votre val2 contrôle de formulaire. Votre code peut être réécrit comme suit:

let val1Control = this.formBuilder.control('', Validators.required);
this.form = this.formBuilder.group({
    val1: val1Control ,
    val2: [{value:'', disabled: val1Control.valid}]
});

Cependant, ce bloc n'initie que la valeur disabled du contrôle val2 sans surveillance val1Control validité. Pour ce faire, vous devrez vous abonner à val1Control.statusChanges:

let val1Control = this.formBuilder.control('', Validators.required);
let val2Control = this.formBuilder.control({value:'', disabled: !val1Control.valid});
this.form = this.formBuilder.group({
  val1: val1Control,
  val2: val2Control
})

val1Control.statusChanges.subscribe((newStatus) => {
  if (val1Control.valid) {
    val2Control.enable();
  } else {
    val2Control.disable();
  }
});

Voici le plongeur de travail: http://plnkr.co/edit/kEoX2hN9UcY4yNS3B5NF

40
Harry Ninh