Angulaire 2: Désactiver le changement d'entrée ne fonctionne pas

Jusqu'à la "finale" 2.0 Angulaire j'ai fait ceci:

<input type="text" formControlName="name" [disabled]="!showName">

Dynamiquement désactiver/activer les entrées d'un formulaire.

Après la mise à niveau à partir de Rc7 à 2,0 j'obtiens ce message d'avertissement dans la fenêtre de la console:

On dirait que vous êtes à l'aide de l'désactivé attribut avec une forme réactive de la directive. Si vous définissez disabled à true
lorsque vous configurez ce contrôle dans votre classe de composant, les personnes handicapées de l'attribut sera effectivement mis dans les DOM pour
vous. Nous vous recommandons d'utiliser cette approche pour éviter de "a changé après avoir coché la case" erreurs.

J'ai changé mon code de suivre ces instructions comme ceci:

this._userGroupUsersForm = this._formBuilder.group({
        'users': [{'', disabled: this.showName}, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(50), Validators.pattern("^[a-zA-ZåäöÅÄÖ 0-9_-]+$")])]
    });

Et qui fonctionne très bien pour le chargement initial de la page, mais je ne peux plus basculer la situation comme ceci:

toggleName() : void { this.showName = !this.showName; }

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

Note: Mon "vieux" façon de le faire (avec le réglage [désactivé]) ne fonctionne plus non plus.

InformationsquelleAutor Glenn Utter | 2016-09-15

angular forms

19

Cela devrait fonctionner
```
toggleName() : void { 
  let ctrl = this.form.get('name')
  ctrl.enabled ? ctrl.disable() : ctrl.enable()
}
```
- Il ne! Vous êtes génial monsieur. Merci!!!! Il n'a cependant toujours se plaindre sur le bouton "soumettre" qui ressemble à ce <button type="submit" class="btn btn-primary" [disabled]="!_stdSearchForm.valid">. Toutes les idées sur qui?
- Se plaindre de ce que. Pouvez-vous s'il vous plaît poster l'erreur exacte?
- Désolé à ce sujet. C'est exactement le même message d'erreur comme avant. Je suppose que ça ressemble à toutes les [désactivé] et de les afficher?
- Je vois. Je pense que c'est un bug alors. Il n'y a pas de contrôle pour le bouton. Auriez-vous l'esprit de le signaler dans github.com/angular/angular ?
- Ce n'est pas un bug. C'était un enfant de la composante contenant [désactivé]. Merci!!!!
- Super, merci pour les commentaires.
- Qu'allons-nous faire si il y a 20 contrôles et souhaitez désactiver tous à la fois?
- @GunterZochbauer
- vous devez obtenir une référence à tous les 20 contrôles et de changer leur handicapés de la propriété à l'aide de la méthode correspondante, qui est un code plus que de la simple modification de l'désactivé prop dans le modèle comme dans la réponse ci-dessous.
- Difficile de le dire. Il dépend de la façon dont votre code ressemble. Je te suggère de créer une nouvelle question. Vous pouvez utiliser this.form.controls pour obtenir tous les contrôles (à un niveau) et d'appeler ctrl.disabled() pour chacun.
InformationsquelleAutor Günter Zöchbauer
29

Cette même question a me tirant de mes cheveux. Ma solution a été d'utiliser l'interpolation plutôt que d'un moyen de liaison à la mise à jour de la propriété. Dans votre cas, au lieu d'utiliser:

<input type="text" formControlName="name" [disabled]="!showName">

que vous pouvez faire:

<input type="text" formControlName="name" disabled="{{!showName}}">

Dès que je l'ai fait, j'ai pu dynamiquement désactiver /activer des éléments dans mes formulaires.

J'espère que cela aide!
- Ce n'est pas compilé dans Anglar 4: Parser Error: Got interpolation ({{}}) where expression was expected
- On dirait que vous être en train de faire [désactivé]="{{interpolation}}". L'esprit de fournir un échantillon de votre code? Merci!
InformationsquelleAutor Vidal Quevedo
20

Vous pouvez essayer d'utiliser l'attribut lecture seule dans votre entrée.

désactivé >>> readonly

HTML:
```
<input type="text" formControlName="name" [readonly]="!showName">
```
InformationsquelleAutor barış çıracı
7

De RC6 vous devez appeler le désactiver() la fonction RC6 Formes: désactivé attribut ne peut pas être défini de façon dynamique plus.

InformationsquelleAutor JayChase
4

Si quelqu'un passe à travers ce et le a accepté de répondre (Günters) ne fonctionne pas, car elle n'est pas pour moi au premier abord. Il pourrait être que vous essayez de l'utiliser avec un composant personnalisé et n'ont pas mis en œuvre la méthode facultative setDisabledState(isDisabled: boolean) de la ControlValueAccessor interface.
- à l'aide d'un composant personnalisé (pour les différents types de champs) propagation des changements (s'étend ControlValueAccessor). Essayé d'interpolation comme dans le commentaire précédent, mais votre solution a été dans mon cas ce qui a fonctionné, semble pratique, juste de mettre à jour comment la forme de contrôle est créé (explicite constructeur désactivé attribut) et ajouté le setdisabledStatus méthode qui définit l'interne désactivé propriété de mon composant personnalisé. merci.
InformationsquelleAutor Hampus
1

Vous devez utiliser:
```
[attr.disabled]
```
Au lieu de:
```
[disabled]
```
J'espère que cela fonctionne.

InformationsquelleAutor dodinh anh

Vous devez vous connecter pour publier un commentaire.