Ответ 1

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

или

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

Ответ 2

Обращать внимание

Если вы создаете форму, используя переменную для условия и пытаетесь изменить ее позже, она не будет работать, то есть форма не изменится.

Например

this.isDisabled = true;

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

и если вы измените переменную

this.isDisabled = false;

форма не изменится. Вы должны использовать

this.cardForm.get( 'число') отключить().

КСТАТИ.

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

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

Ответ 3

Это плохая практика использовать отключение в 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();

Ответ 4

Будет более общий подход.

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

Ответ 5

Это сработало для меня: this.form.get('first').disable({onlySelf: true});

Ответ 6

Если использовать disabled элементы ввода формы (как предложено в правильном ответе, как отключить ввод), проверка для них также будет отключена, обратите на это внимание!

(И если вы используете кнопку отправки вроде [disabled]="!form.valid" это исключит ваше поле из проверки)

Ответ 7

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

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

Ответ 8

Если вы хотите first отключить (formcontrol), вы можете использовать инструкцию ниже.

this.form.first.disable();

Ответ 9

Лучшее решение здесь:

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

Ответ 10

Чтобы заставить поле отключить и включить из angular формы реактивной формы 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();

same for disable, replace enable() with disable().

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

Ответ 11

У меня была та же проблема, но вызов this.form.controls ['name']. Disable() не устранил ее, потому что я перезагружал свое представление (используя router.navigate()).

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

this.form = не определено; this.router.navigate([путь]);

Ответ 12

Вы можете использовать . This.form.controls [ 'имя'] отключить();