Reaktive Formulare - deaktiviertes Attribut

Ich versuche, das disabledAttribut von a zu verwenden formControl. Wenn ich es in die Vorlage einfüge, funktioniert es:

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

Aber der Browser warnt mich:

Es sieht so aus, als würden Sie das Attribut disabled mit einer reaktiven Formularanweisung verwenden. Wenn Sie beim Einrichten dieses Steuerelements in Ihrer Komponentenklasse deaktiviert auf true setzen, wird das Attribut disabled tatsächlich im DOM für Sie festgelegt. Wir empfehlen diesen Ansatz, um Fehler zu vermeiden, die nach Überprüfung geändert wurden.

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

Also habe ich es in die FormControlund aus der Vorlage gelöscht:

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 deaktiviert das nicht input). Was ist das Problem?

Ich habe verwendet, [attr.disabled]weil ich diese Vorlage immer noch als programmgesteuertes enable () / disable () mag, da sie IMO überlegen ist.

Veränderung

<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 neuerem Material sind, wechseln Sie md-inputzu mat-input.

Sie können ein Formularsteuerelement mithilfe der folgenden Methoden aktivieren / deaktivieren:

control.disable () oder control.enable ()

Wenn das bei Ihnen nicht funktioniert hat, können Sie eine Direktive verwenden

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

}

Dann könnten Sie es so verwenden

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

Diese Technik wird hier beschrieben:

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Ich hoffe es hilft

Ich stellte fest, dass ich einen Standardwert haben musste, auch wenn es eine leere Zeichenfolge war, damit es funktionierte. Also das:

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

... musste das werden:

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

Siehe meine Frage (von der ich nicht glaube, dass sie ein Duplikat ist): Die Übergabe von 'disabled' im Formularstatusobjekt an den FormControl-Konstruktor funktioniert nicht

In meinem Fall mit Angular 8 . Ich wollte das Aktivieren / Deaktivieren des Eingangs je nach Bedingung umschalten.

[attr.disabled] hat bei mir nicht funktioniert, also hier ist meine Lösung.

Ich habe [attr.disabled]aus HTML entfernt und in der Komponentenfunktion diese Prüfung durchgeführt:

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

Initialisierung (Komponente) mit:

public selector = new FormControl({value: '', disabled: true});

Dann anstatt (Vorlage) zu verwenden:

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Entfernen Sie einfach das deaktivierte Attribut:

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Und wenn Sie Elemente anzeigen möchten, starten Sie (in der Komponente): this.selector.enable();

Ich habe diese in Winkel 7 ausprobiert. Es hat erfolgreich funktioniert.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

this.form.disable()
this.form.enable()

Zum einen macht formcontrol deaktivieren

this.form.get('first').disable()
this.form.get('first').enable()

Oder anfängliche Einstellmethode.

first: new FormControl({disabled: true}, Validators.required)

Verwenden Sie stattdessen [attr.disabled] [disabled], in meinem Fall funktioniert es in Ordnung

add disable = "true" zum HTML-Feld Beispiel: disable

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

Das Schöne an reaktiven Formen ist, dass Sie Werteänderungsereignisse für jedes Eingabeelement sehr einfach erfassen und gleichzeitig deren Werte / Status ändern können. Hier ist eine andere Möglichkeit, Ihr Problem mithilfe von zu lösenenable disable .

Hier ist die Komplettlösung auf stackblitz .

Das Deaktivieren von Mattenformularfeldern ist ausgenommen, wenn Sie die Formularvalidierung verwenden. Stellen Sie daher sicher, dass Ihr Formularfeld keine Validierungen wie (validators.required) enthält. Dies hat bei mir funktioniert. zum Beispiel:

editUserPhone: neues FormControl ({Wert: '', deaktiviert: true})

Dadurch können die Telefonnummern des Benutzers nicht bearbeitet werden.

Das war meine Lösung:

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

Nur wer reaktive Formulare verwendet: Für native HTML-Elemente [attr.disabled] funktioniert dies, für Materialelemente muss das Element jedoch dynamisch deaktiviert werden.

this.form.get('controlname').disable();

Andernfalls wird eine Warnmeldung in der Konsole angezeigt.

Wenn Sie in Angular-9 die Schaltfläche deaktivieren / aktivieren möchten, klicken Sie hier. Dies ist eine einfache Lösung, wenn Sie reaktive Formulare verwenden.

Definieren Sie eine Funktion in der Datei component.ts

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

Rufen Sie es von Ihrer component.html auf

z.B

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Verwenden Sie beim Erstellen eines neuen Formularsteuerelements Folgendes:

variable: FormControl = new FormControl({value: '', disabled: true});

Wenn Sie die Aktivität ändern möchten, verwenden Sie als Nächstes:

this.variable.enable() 

oder

this.variable.disable()

füge deinem md-input ein name-Attribut hinzu. Wenn das Problem dadurch nicht behoben wird, veröffentlichen Sie bitte Ihre Vorlage

Ultimative Möglichkeit, dies zu tun.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}