Próbowałem już pójść za przykładem innych odpowiedzi stąd i nie udało mi się!

Utworzyłem formularz reaktywny (tj. Dynamiczny) i chcę w dowolnym momencie wyłączyć niektóre pola. Mój kod formularza:

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: ['']
}));

mój 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>

Skróciłem kod, aby ułatwić. Chcę wyłączyć pole wyboru typu. Próbowałem wykonać następujące czynności:

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

nie działa! Ktokolwiek ma jakieś sugestie?

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

lub

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

Zwróć uwagę

Jeśli tworzysz formularz używając zmiennej warunku i próbujesz go później zmienić, to nie zadziała, tj . Forma się nie zmieni .

Na przykład

this.isDisabled = true;

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

i jeśli zmienisz zmienną

this.isDisabled = false;

forma nie ulegnie zmianie. Powinieneś użyć

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

BTW.

Do zmiany wartości należy użyć metody patchValue:

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

Używanie wyłączania w DOM z formularzami reaktywnymi jest złą praktyką. Możesz ustawić tę opcję w swoim FormControl, podczas inicjowania pliku from

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

Nieruchomość valuenie jest konieczna

Lub możesz uzyskać kontrolę nad formularzem za pomocą get('control_name')i ustawićdisable

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

Rozwiązałem to, owijając mój obiekt wejściowy etykietą w zestawie pól: Zestaw pól powinien mieć właściwość disabled powiązaną z wartością logiczną

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

disablingFormControl prevents, że jest obecny w postaci while saving. Możesz po prostu ustawić readonlywłaściwość.

Możesz to osiągnąć w ten sposób:

HTML:

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

TS:

this.disbaleSelect = true;

Znalazłem to tutaj

Jeśli użyć disabledelementów wejściowych formularza (jak sugerowano w poprawnej odpowiedzi, jak wyłączyć wprowadzanie ), ich walidacja również zostanie wyłączona, zwróć na to uwagę!

(A jeśli używasz przycisku przesyłania, [disabled]="!form.valid"co spowoduje wykluczenie pola z walidacji)

Byłoby bardziej ogólne podejście.

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

Jeśli chcesz wyłączyć first(formcontrol), możesz użyć poniższej instrukcji.

this.form.first.disable();

To zadziałało dla mnie: this.form.get('first').disable({onlySelf: true});

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

Lub formcontrol „pierwszy”

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

Możesz wyłączyć lub włączyć na początkowym ustawieniu.

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

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

Najlepsze rozwiązanie jest tutaj:

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

Zarys rozwiązania (w przypadku niedziałającego linku):

(1) Utwórz dyrektywę

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) Używaj go w ten sposób

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

(3) Ponieważ wyłączone dane wejściowe nie są wyświetlane w form.value podczas przesyłania, może być konieczne użycie następujących zamiast tego (jeśli jest to wymagane):

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

Miałem ten sam problem, ale wywołanie this.form.controls ['name']. Disable () nie rozwiązało problemu, ponieważ ładowałem ponownie widok (używając router.navigate ()).

W moim przypadku musiałem zresetować mój formularz przed ponownym załadowaniem:

this.form = undefined; this.router.navigate ([ścieżka]);

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

Możesz zadeklarować funkcję, aby włączyć / wyłączyć całą kontrolkę formularza:

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

i używaj go w ten sposób

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

Aby dokonać pole Wyłącz i pozwalają na postaci reaktywnej kątowego 2+

1. Aby wyłączyć

• Dodaj [attr.disabled] = "true" do wejścia.

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

Umożliwić

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

Włącz cały formularz

this.formname.enable();

Włącz tylko określone pole

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

to samo dla disable, zamień enable () na disable ().

To działa dobrze. Komentarz do zapytań.