Я вже намагався наслідувати приклад інших відповідей звідси і мені це не вдалося!

Я створив реактивну форму (тобто динамічну) і хочу відключити деякі поля в будь-який момент часу. Мій код форми:

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

мій 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>

Я зменшив код для полегшення. Я хочу відключити поле вибору типу. Я намагався зробити наступне:

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

не працює! Хтось має пропозицію?

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

або

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

Звернути увагу

Якщо ви створюєте форму, використовуючи змінну для умови та намагаєтесь її згодом змінити, вона не спрацює, тобто форма не зміниться .

Наприклад

this.isDisabled = true;

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

і якщо ви зміните змінну

this.isDisabled = false;

форма не зміниться. Ви повинні використовувати

this.cardForm.get ('число'). enable ();

До речі.

Ви повинні використовувати метод patchValue для зміни значення:

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

Неправильно застосовувати відключення в DOM з реактивними формами. Ви можете встановити цей параметр у своєму FormControl, коли ви починаєте з

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

Власність valueне потрібна

Або ви можете отримати контроль форми get('control_name')та встановитиdisable

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

Я вирішив це, обернувши мій об'єкт введення його міткою в набір полів: Набір полей повинен мати відключене властивість прив’язане до булевого

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

disablingFormControl preventsвона може бути присутнім в формі , в той час saving. Ви можете просто встановити це readonlyвластивість.

І ви можете досягти цього таким чином:

HTML:

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

TS:

this.disbaleSelect = true;

Знайшли це тут

Якщо використовувати disabledелементи введення форми (як, наприклад, запропоновано у правильній відповіді, як відключити введення ), перевірка для них також буде відключена, зверніть увагу на це!

(І якщо ви використовуєте кнопку для надсилання, [disabled]="!form.valid"то вона виключить ваше поле з перевірки)

Більш загальний підхід був би.

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

Якщо ви хочете відключити first(formcontrol), тоді ви можете використовувати оператор нижче.

this.form.first.disable();

Це працювало для мене: this.form.get('first').disable({onlySelf: true});

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

Або formcontrol 'перший'

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

Ви можете встановити відключення або включити на початковому наборі.

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

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

Найкраще рішення тут:

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

Концепція рішення (у разі розриву зв'язку):

(1) Створіть директиву

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) Використовуйте його так

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

(3) Оскільки вимкнено введені дані не відображаються у form.value при надсиланні, можливо, вам доведеться скористатися наступним чином (якщо потрібно):

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

У мене була така ж проблема, але виклик this.form.controls ['name']. Disabled () не виправив її, тому що я перезавантажував свій погляд (використовуючи router.navigate ()).

У моєму випадку мені довелося скинути форму перед перезавантаженням:

this.form = невизначений; this.router.navigate ([шлях]);

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

Ви можете оголосити функцію, щоб увімкнути / вимкнути весь контроль форми:

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

і використовувати його так

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

Для того, щоб зробити поле Відключити і включити в реактивної формі кутового 2+

1. Відключити

• Додайте [attr.disabled] = "true" для введення.

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

Для того, щоб

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

Увімкнути всю форму

this.formname.enable();

Увімкнути лише окреме поле

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

те ж саме для відключення, замініть enable () на enable ().

Це прекрасно працює. Коментар для запитів.