Я уже пробовал следовать примеру других ответов отсюда, и мне это не удалось!

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

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 ('число'). disable ();

Кстати.

Вы должны использовать метод patchValue для изменения значения:

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

Использование disable в 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();

Я решил это, заключив свой входной объект с его меткой в ​​набор полей: у набора полей должно быть свойство disabled, привязанное к логическому

 <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/disables-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']. Disable () не устранил ее, потому что я перезагружал свое представление (используя router.navigate ()).

В моем случае мне пришлось сбросить форму перед перезагрузкой:

this.form = undefined; 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();

То же самое для disable, замените enable () на disable ().

Это прекрасно работает. Комментарии к запросам.