angular - Reaktive skjemaer - deaktivert attributt

Jeg prøver å bruke disabled-attributtet fra en formControl. Når jeg setter det i malen, fungerer det:

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

Men nettleseren varsler meg:

Det ser ut som du bruker attributtet disabled med en reaktiv formdirektiv. Hvis du setter disabled til true når du setter opp denne kontrollen i komponentklassen din, vil disabled-attributtet faktisk bli satt i DOM-en for deg. Vi anbefaler å bruke denne tilnærmingen for å unngå 'changed after checked'-feil.

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

Så jeg la det inn i FormControl, og slettet fra malen:

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);
}

Men det fungerer ikke (det deaktiverer ikke input). Hva er problemet?

Svar #1

Jeg har brukt [attr.disabled] fordi jeg fortsatt liker denne maldrevne tilnærmingen mer enn programmatiske enable()/disable(), da det er overlegent etter min mening.

Endre

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

til

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

Hvis du bruker nyere materiale, endre md-input til mat-input.

Svar #2

I mitt tilfelle med Angular 8. Jeg ønsket å veksle mellom å aktivere/deaktivere inputen avhengig av tilstanden.

[attr.disabled] fungerte ikke for meg, så her er min løsning.

Jeg fjernet [attr.disabled] fra HTML og utførte denne sjekken i komponentfunksjonen:

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Svar #3

Du kan aktivere/deaktivere en skjemakontroll ved å bruke følgende metoder:

control.disable() eller control.enable()

Hvis det ikke fungerte for deg, kan du bruke en direktiv

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

Da kunne du bruke det slik

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

Denne teknikken er beskrevet her:

https://netbasal.com/deaktivere-skjema-kontroller-ved-arbeid-med-reaktive-skjemaer-i-angular-549dd7b42110

Håper det hjelper

Svar #4

Det trenger en standardverdi, selv om det er en tom streng. Så dette:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

...bør være dette:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

Begrunnelsen for dette kravet kan finnes her: github.com/angular/angular/pull/10994#issuecomment-244195999

Se på spørsmålet mitt (som jeg ikke tror er en duplikat): Å sende 'disabled' i formtilstandsobjektet til FormControl-konstruktøren fungerer ikke

Relaterte artikler