Reaktive Formen - deaktiviert Attribut

Question

Ich versuche, das disabled Attribut von einem formControl zu verwenden. Wenn ich es in der Vorlage setzen, funktioniert es:

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input> 

Aber der Browser warnt mich:

Es sieht aus wie Sie das disabled-Attribut mit einem reaktiven Form Direktive sind. Wenn Sie beim Einrichten dieses Steuerelements in der Komponentenklasse "deaktiviert" auf " " setzen, wird das deaktivierte Attribut tatsächlich im DOM für festgelegt. Wir empfehlen, diesen Ansatz zu verwenden, um Fehler nach Änderungen zu vermeiden.

Example: 
    form = new FormGroup({ 
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), 
    last: new FormControl('Drew', Validators.required) 
    }); 

Also habe ich es in den FormControl, und aus der Vorlage gestrichen:

constructor(private itemsService: ItemsService) { 
    this._items = []; 
    this.myForm = new FormGroup({ 
     id: new FormControl({value: '', disabled: true}, Validators.required), 
     title: new FormControl(), 
     description: new FormControl() 
    }); 
    this.id = this.myForm.controls['id']; 
    this.title = this.myForm.controls['title']; 
    this.description = this.myForm.controls['description']; 
    this.id.patchValue(this._items.length); 
} 

Aber es funktioniert nicht (es ist nicht das Deaktivieren des Eingangs). Was ist das Problem?

Answer 1

Ich habe [attr.disabled] benutze Sein Ursache Ich mag diese Vorlage immer noch als programmgesteuertes enable()/disable(), da es IMO überlegen ist.

ändern

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

zu

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

Wenn Sie auf neueren Materialwechsel md-Eingang mat-input sind.

Answer 2

Add Name Attribut zu Ihrem MD-Eingang. Wenn es das Problem nicht löst, bitte posten Sie Ihre Vorlage

Answer 3

Um dieses Problem zu lösen, können Sie so versuchen.

für disable

this.myForm.controls['id'].disable(); 

für ermöglichen

this.myForm.controls['id'].enable(); 

Weitere Referenz der Frage geht durch diesen Zusammenhang in Github veröffentlicht https://github.com/angular/angular/issues/11271#issuecomment-244507976

Answer 4

Verwenden [attr.disabled] statt [disabled], es in meinem Fall funktioniert ok