it-swarm.com.de

Angular 2: Eingangsänderung deaktivieren funktioniert nicht

Bis "final" 2.0 von Angular habe ich folgendes gemacht:

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

Zum dynamischen Deaktivieren/Aktivieren von Formulareingaben.

Nach dem Upgrade von Rc7 auf 2.0 wird im Konsolenfenster folgende Warnung angezeigt:

Anscheinend verwenden Sie das Attribut disabled mit einer Direktive für reaktive Formulare. Wenn Sie disabled beim Einrichten dieses Steuerelements in Ihrer Komponentenklasse auf true setzen, wird das Attribut disabled im DOM tatsächlich für Sie festgelegt. Wir empfehlen, diesen Ansatz zu verwenden, um Fehler zu vermeiden, die nach dem Überprüfen geändert wurden.

Ich habe meinen Code geändert, um die folgenden Anweisungen zu befolgen:

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_-]+$")])]
    });

Und das funktioniert einwandfrei für das Laden der ersten Seite, aber ich kann den Status nicht mehr wie folgt ändern:

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

Wie löse ich das?

Hinweis: Meine "alte" Methode (durch Setzen von [deaktiviert]) funktioniert auch nicht mehr.

25
Glenn Utter

Das sollte funktionieren

toggleName() : void { 
  let ctrl = this.form.get('name')
  ctrl.enabled ? ctrl.disable() : ctrl.enable()
}
19

Das gleiche Problem hatte ich meine Haare ziehen. Meine Lösung bestand darin, zum Aktualisieren der Eigenschaft die Interpolation und nicht die Einwegbindung zu verwenden. In Ihrem Fall anstelle von:

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

du könntest es tun:

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

Sobald ich das getan habe, konnte ich Elemente in meinen Formularen dynamisch deaktivieren/aktivieren.

Ich hoffe das hilft!

29
Vidal Quevedo

Sie können versuchen, das schreibgeschützte Attribut in Ihrer Eingabe zu verwenden.

deaktiviert >>> schreibgeschützt

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

Ab RC6 müssen Sie die Funktion disable () aufrufen RC6 Forms: disabled Attribut kann nicht mehr dynamisch gesetzt werden .

7
JayChase

Wenn jemand das durchblättert und die akzeptierte Antwort (Günters) nicht funktioniert, wie es anfangs bei mir nicht der Fall war. Möglicherweise versuchen Sie, es mit einer benutzerdefinierten Komponente zu verwenden, und haben die optionale Methode setDisabledState(isDisabled: boolean) von der Schnittstelle ControlValueAccessor nicht implementiert.

4
Hampus

Sie müssen verwenden:

[attr.disabled]

Anstatt:

[disabled]

Ich hoffe es klappt.

1
dodinh anh