Ich habe bereits versucht, dem Beispiel anderer Antworten von hier aus zu folgen, und es ist mir nicht gelungen!

Ich habe ein reaktives Formular (dh ein dynamisches Formular) erstellt und möchte einige Felder jederzeit deaktivieren. Mein Formularcode:

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

mein html:

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

Ich habe den Code reduziert, um dies zu erleichtern. Ich möchte das Feld Typauswahl deaktivieren. Ich habe Folgendes versucht:

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

funktioniert nicht! Hat jemand einen Vorschlag?

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

oder

this.form.controls['name'].disable();

Passt auf

Wenn Sie ein Formular mit einer Variablen für die Bedingung erstellen und später versuchen, es zu ändern, funktioniert es nicht, dh das Formular ändert sich nicht .

Beispielsweise

this.isDisabled = true;

this.cardForm = this.fb.group({
    'number': [{value: null, disabled: this.isDisabled},
});

und wenn Sie die Variable ändern

this.isDisabled = false;

Das Formular wird sich nicht ändern. Du solltest benutzen

this.cardForm.get ('number'). disable ();

Übrigens.

Sie sollten die patchValue-Methode verwenden, um den Wert zu ändern:

this.cardForm.patchValue({
    'number': '1703'
});

Es ist eine schlechte Praxis, die Deaktivierung in einem DOM mit reaktiven Formen zu verwenden. Sie können diese Option in Ihrem festlegen FormControl, wenn Sie das von initiieren

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

Eigentum valueist nicht notwendig

Oder Sie können Ihre Formularsteuerung mit erhalten get('control_name')und festlegendisable

this.userForm.get('username').disable();

Ich habe es gelöst, indem ich mein Eingabeobjekt mit seiner Bezeichnung in eine Feldmenge eingeschlossen habe: In der Feldmenge sollte die Eigenschaft disabled an den Booleschen Wert gebunden sein

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

Das disablingFormControl preventssoll in einer Form vorhanden sein saving. Sie können einfach die readonlyEigenschaft festlegen .

Und Sie können es so erreichen:

HTML:

<select formArrayName="value" [readonly] = "disableSelect">

TS:

this.disbaleSelect = true;

Fand das hier

Wenn die Verwendung von disabledFormulareingabeelementen (wie in der richtigen Antwort zum Deaktivieren der Eingabe vorgeschlagen ) ebenfalls deaktiviert ist, beachten Sie dies!

(Und wenn Sie die Schaltfläche "Senden" verwenden [disabled]="!form.valid", wird Ihr Feld von der Validierung ausgeschlossen.)

Ein allgemeinerer Ansatz wäre.

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}

Wenn Sie deaktivieren möchten first(formcontrol), können Sie die folgende Anweisung verwenden.

this.form.first.disable();

Das hat bei mir funktioniert: this.form.get('first').disable({onlySelf: true});

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

Oder formcontrol 'first'

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

Sie können Deaktivieren oder Aktivieren beim ersten Einstellen festlegen.

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

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

Die beste Lösung ist hier:

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

Lösungsüberblick (bei defekter Verbindung):

(1) Erstellen Sie eine Richtlinie

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

(2) Verwenden Sie es so

<input [formControl]="formControl" [disableControl]="condition">

(3) Da deaktivierte Eingaben beim Senden nicht in form.value angezeigt werden, müssen Sie möglicherweise stattdessen Folgendes verwenden (falls erforderlich):

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

Ich hatte das gleiche Problem, aber das Aufrufen von this.form.controls ['name']. Disable () hat es nicht behoben, da ich meine Ansicht neu geladen habe (mithilfe von router.navigate ()).

In meinem Fall musste ich mein Formular vor dem erneuten Laden zurücksetzen:

this.form = undefined; this.router.navigate ([Pfad]);

setTimeout(() => { emailGroup.disable(); });

Sie können eine Funktion zum Aktivieren / Deaktivieren des gesamten Formularsteuerelements deklarieren:

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

und benutze es so

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

Um ein Feld zu machen deaktivieren und aktiviert von reaktiver Form Winkel 2+

1. Deaktivieren

• Fügen Sie [attr.disabled] = "true" zur Eingabe hinzu.

<input class="form-control" name="Firstname" formControlName="firstname" [attr.disabled]="true">

Ermöglichen

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

Aktivieren Sie das gesamte Formular

this.formname.enable();

Aktivieren Sie nur ein bestimmtes Feld

this.formname.controls.firstname.enable();

Gleiches gilt für Deaktivieren. Ersetzen Sie enable () durch disable ().

Das funktioniert gut. Kommentar für Fragen.