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

Я намагаюся використати disabledатрибут із formControl. Коли я вкладаю його в шаблон, він працює:

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

Але браузер попереджає мене:

Схоже, ви використовуєте атрибут disabled з директивою реактивної форми. Якщо ви встановили значення true для 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] тому що мені все ще подобається цей шаблон, керований програмним увімкненням () / відключенням (), оскільки він чудовий 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/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Сподіваюся, це допоможе

Я виявив, що мені потрібно мати значення за замовчуванням, навіть якщо це було порожнім рядком для його роботи. Отже це:

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

... повинен був стати таким:

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

Перегляньте моє запитання (яке, на мою думку, не є дублікатом): Передача об'єкта стану "відключеного" у конструктор FormControl не працює

У моєму випадку з Angular 8 . Я хотів увімкнути / вимкнути вхід в залежності від стану.

[attr.disabled] не працював для мене, тому ось моє рішення.

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

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

Ініціалізація (компонент) за допомогою:

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

Тільки ті, хто використовує реактивні форми: для власних елементів HTML [attr.disabled] буде працювати, але для елементів матеріалу нам потрібно динамічно вимкнути елемент.

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

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

Я спробував їх у кутовому 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()

Для однієї формиcontrol робить відключення

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

Або метод початкового набору.

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

Використовуйте [attr.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.

Ось повне рішення щодо стекбліцу .

відключення полів матової форми звільняється, якщо ви використовуєте перевірку форми, тому переконайтеся, що у вашому полі форми немає жодних перевірок, таких як (validators.required), це спрацювало для мене. наприклад:

editUserPhone: new FormControl ({value: '', disabled: 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()">

Створюючи новий елемент керування формою, використовуйте наступне:

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

Якщо ви хочете змінити діяльність, використовуйте наступне:

this.variable.enable() 

або

this.variable.disable()

додати атрибут name до вашого md-вводу. якщо це не вирішує проблему, надішліть шаблон

Кінцевий спосіб зробити це.

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