web-dev-qa-db-fra.com

Angular 2: le changement d'entrée désactivé ne fonctionne pas

Jusqu'au "final" 2.0 de Angular j'ai fait ceci:

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

Pour activer/désactiver dynamiquement les entrées de formulaire.

Après la mise à niveau de Rc7 à 2.0, je reçois cet avertissement dans la fenêtre de la console:

Il semble que vous utilisiez l'attribut disabled avec une directive de formulaire réactif. Si vous définissez disabled sur true lorsque vous configurez ce contrôle dans votre classe de composants, l'attribut disabled sera en réalité défini dans le DOM pour vous. Nous vous recommandons d'utiliser cette approche pour éviter les erreurs "changé après contrôle".

J'ai changé mon code pour 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 cela fonctionne bien pour le chargement initial de la page, mais je ne peux plus basculer le statut de la manière suivante:

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

Comment résoudre ce problème?

Remarque: ma "vieille" méthode (en réglant [disabled]) ne fonctionne plus non plus.

formsangular
25
Glenn Utter

Cela devrait marcher

toggleName() : void { 
  let ctrl = this.form.get('name')
  ctrl.enabled ? ctrl.disable() : ctrl.enable()
}
19
Günter Zöchbauer

Ce même problème m'avait tiré les cheveux. Ma solution consistait à utiliser l'interpolation plutôt que la liaison à sens unique pour mettre à jour la propriété. Dans votre cas, au lieu d'utiliser:

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

vous pourriez faire:

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

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

J'espère que ça aide!

29
Vidal Quevedo

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

désactivé >>> en lecture seule

<input type="text" formControlName="name" [readonly]="!showName">
20
barış çıracı

A partir de RC6, vous devez appeler la fonction disable () attribut RC6 Forms: disabled ne peut plus être défini dynamiquement .

7
JayChase

Si quelqu'un fait défiler cela et que la réponse acceptée (Günters) ne fonctionne pas, comme cela ne l'était pas pour moi au début. Il se peut que vous essayiez de l'utiliser avec un composant personnalisé et que vous n'ayez pas implémenté la méthode optionnelle setDisabledState(isDisabled: boolean) à partir de l'interface ControlValueAccessor.

4
Hampus

Vous devez utiliser:

[attr.disabled]

Au lieu de:

[disabled]

J'espère que ca fonctionne.

1
dodinh anh