Реактивные формы - отключенный атрибут

Я пытаюсь использовать disabledатрибут из файла formControl. Когда я вставляю его в шаблон, он работает:

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

Но браузер предупреждает меня:

Похоже, вы используете атрибут disabled с директивой реактивной формы. Если вы установите для disabled значение true при настройке этого элемента управления в своем классе компонента, атрибут disabled будет фактически установлен в DOM за вас. Мы рекомендуем использовать этот подход, чтобы избежать ошибок типа «изменено после проверки».

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

Я поместил его в FormControlи удалил из шаблона:

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

Но не работает (не отключает input). В чем проблема?

Я использую, [attr.disabled]потому что мне все еще нравится этот шаблон, управляемый, чем программный enable () / disable (), поскольку он превосходит IMO.

+ Изменить

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

к

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

Если вы используете более новый материал, измените его md-inputна mat-input.

Вы можете включить / отключить элемент управления формой, используя следующие методы:

control.disable () или control.enable ()

Если это не сработало, вы можете использовать директиву

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

}

Тогда вы могли бы использовать это так

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

Этот метод описан здесь:

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

Надеюсь, это поможет

В моем случае с Angular 8 . Я хотел включить / выключить ввод в зависимости от условия.

[attr.disabled] у меня не сработало, так что вот мое решение.

Я удалил [attr.disabled]из HTML и в функции компонента выполнил эту проверку:

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Я обнаружил, что мне нужно иметь значение по умолчанию, даже если это была пустая строка для работы. Итак, это:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

... должен был стать таким:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

См. Мой вопрос (который я не считаю дубликатом): передача «отключен» в объекте состояния формы в конструктор FormControl не работает

Инициализация (компонент) с использованием:

public selector = new FormControl({value: '', disabled: true});

Тогда вместо использования (шаблона):

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Просто удалите атрибут disabled:

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

И когда у вас есть элементы для отображения, запустите (в компоненте): this.selector.enable();

Только те, кто использует реактивные формы: для собственных HTML-элементов [attr.disabled] будет работать, но для материальных элементов нам нужно динамически отключить элемент.

this.form.get('controlname').disable();

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

Я пробовал это в angular 7. Он успешно работал.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

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

Для одного formcontrol отключает

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

Или метод начальной установки.

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

Используйте [attr.disabled] вместо [disabled], в моем случае он работает нормально

добавить disable = "true" в поле html Пример: отключить

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

Прелесть реактивных форм в том, что вы можете очень легко уловить событие изменения значений любого элемента ввода и в то же время вы можете изменить их значения / статус. Итак, вот еще один способ решить вашу проблему, используяenable disable .

Вот полное решение stackblitz .

отключение полей формы mat исключено, если вы используете проверку формы, поэтому убедитесь, что ваше поле формы не имеет никаких проверок, таких как (validators.required), это сработало для меня. например:

editUserPhone: новый FormControl ({значение: '', отключено: true})

это делает номера телефонов пользователей недоступными для редактирования.

Это было моим решением:

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

в Angular-9, если вы хотите отключить / включить нажатием кнопки, нажмите здесь, это простое решение, если вы используете реактивные формы.

определить функцию в файле component.ts

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

Вызовите его из вашего component.html

например

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Когда вы создаете новый элемент управления Form, используйте следующее:

variable: FormControl = new FormControl({value: '', disabled: true});

Если вы хотите изменить активность, используйте следующее:

this.variable.enable() 

или

this.variable.disable()

добавьте атрибут name к вашему md-input. если это не решит проблему, опубликуйте свой шаблон

Лучший способ сделать это.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}