Я пытаюсь использовать disabled атрибут из formControl. Когда я помещаю его в шаблон, он работает:
<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>
Но браузер предупреждает меня:
Похоже, вы используете отключенный атрибут с директивой реактивной формы. Если вы установите для параметра 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 для md-input mat-input.
Чтобы решить эту проблему, вы можете попробовать это.
отключить
this.myForm.controls['id'].disable();
для включения
this.myForm.controls['id'].enable();
Для получения дополнительной справки рассмотрите вопрос, опубликованный в github, относящийся к этому https://github.com/angular/angular/issues/11271#issuecom.2-244507976
Вы можете включить/отключить управление формой, используя следующие методы:
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>
Этот метод описан здесь:
Надеюсь, поможет
Я обнаружил, что мне нужно иметь значение по умолчанию, даже если это была пустая строка для его работы. Итак, это:
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>
Просто удалите атрибут отключен:
<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>
И когда у вас есть элементы для отображения, запустите (в компоненте): this.selector.enable();
добавьте атрибут имени к вашему md-вводу. если это не решит проблему, отправьте свой шаблон
Использовать [attr.disabled] вместо [отключено], в моем случае он работает нормально
Это было мое решение:
this.myForm = this._formBuilder.group({
socDate: [[{ value: '', disabled: true }], Validators.required],
...
)}
<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />
add 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.
Вот полное решение по стеку.
Отключение матовых полей формы освобождается, если вы используете проверку формы, поэтому убедитесь, что в вашем поле формы нет таких проверок, как (validators.required), это сработало для меня. Например:
editUserPhone: новый FormControl ({значение: '', отключено: true})
это делает телефонные номера пользователя недоступными для редактирования.
Лучший способ сделать это.
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.
})
}