Reactive forms - disabled attribute

disable form control angular 6
disable form control angular 4
disable form control angular 8
angular disable form
disable formgroup angular 6
angular 6 disable input on condition
form control disabled
reactive form make disabled

I am trying to use the disabled attribute from a formControl. When I put it in the template, it works:

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

But the browser alerts me:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

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

So I put it in the FormControl, and deleted from the template:

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

But it does not work (it is not disabling the input). What is the problem?

I have been using [attr.disabled] because I still like this template driven than programmatic enable()/disable() as it is superior IMO.

Change

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

to

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

If you are on newer material change md-input to mat-input.

Reactive forms - disabled attribute, I have been using [attr.disabled] because I still like this template driven than programmatic enable()/disable() as it is superior IMO. Change It looks like you’re using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid ‘changed after checked’ errors. Angular tells you that it’s better for you to use the ways it gives you to disable/enable form controls.

You can enable/disable a form control by using the following methods:

control.disable() or control.enable()

If that did not work for you can use a directive

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

}

Then you could use it like this

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

This technique is described here:

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

Hope it helps

"disabled attribute with a reactive form directive" Warning, when , "disabled attribute with a reactive form directive" Warning, when using reactive forms with disabled attribute #581. Closed. Zoltamcsak opened  The disabled attribute When we either enable or disable our form (group), Angular actually enables or disables the controls within the group individually. The reason for this is that there isn’t

I found that I needed to have a default value, even if it was an empty string for it to work. So this:

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

...had to become this:

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

See my question (which I don't believe is a duplicate): Passing 'disabled' in form state object to FormControl constructor doesn't work

RC 6 Reactive Forms doesn't support disabled binding · Issue , It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your  It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

Initialization (component) using:

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

Then instead of using (template):

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

Just remove the attribute disabled:

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

And when you have items to show, launch (in component): this.selector.enable();

Angular, This blog post makes use of reactive forms, but the examples should be that there isn't something like a disabled attribute on a form tag as there is on an input​. This post will explore how to disable a form based on the input value of another form field in an Angular application. This is particularly useful if you are using Angular’s Reactive Forms to handle user input, validation and model building before submitting to an endpoint. If you have used Reaactive Forms previously, you

In my case with Angular 8. I wanted to toggle enable/disable of the input depending on the condition.

[attr.disabled] didn't worked for me so here is my solution.

I removed [attr.disabled from HTML and in the component function.

if (condition) {
    this.form.controls.myField.disabled();
} else {
    this.form.controls.myField.enabled();
}

I keep getting this in my console log on my forms page, what exactly , forms.es5.js:4537 It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your  Reactive forms provide two ways of grouping multiple related controls into a single input form. A form group defines a form with a fixed set of controls that you can manage together. Form group basics are discussed in this section.

Reactive forms - disabled attribute - angular - html, Reactive forms - disabled attribute - angular. I am trying to use the disabled attribute from a formControl. When I put it in the template, it works: <md-input  @Highspeed7 That works "partially" in that the element's disabled attribute value is bound to the expected value, but for some arcane HTML standard reason, the disabled attribute need only exist for it to disable the element, even if disabled="false".

How to handle reactive way for disabled property for input e , mdb input elements not allowing to handled disabled property using reactive forms. We have to send separate disabled property by using attr.disabled attribute. By default, whenever a value of a FormControl changes, Angular runs the control validation process. For example, if you have an input that is bound to a form control, Angular performs the control validation process for every keystroke.

How To Disable Angular ReactiveForm Input Based On Selection , This post will explore how to disable a form <input> based on the input value of validation and the object model created by the Angular Reactive Form. We have now completed the basic set up of our address component. It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

Comments
  • This seems to work just fine with the current version of Angular 2: plnkr.co/edit/CQQtkYC9D5EoH0sAlNCV?p=preview
  • I am using the lastest angular cli project for testing
  • You're using @angular/material, so, per their github issues: github.com/angular/material2/issues/1171 It's not yet supported and they're in alpha so you can't expect it to be feature complete.
  • Yes, it was the problem
  • You can try putting this.myForm.controls['id'].disable() somewhere in the constructor. I did a library which makes it easier to work with dynamic forms: github.com/mat3e/dorf
  • It works, thanks! But i don't understand why i should use "attr.disabled" (not only "disabled") ?
  • Just to note, with [attr.disabled] you can't use bind it in two way. It only works once. With [disabled] and the warning in console is working. I'm using Angular 4.1.3
  • I think that [attr.disabled] just does not trigger the warning that [disabled] shows
  • Can you elaborate on why do you think it's "superior"?
  • Properties of form field are readable from the HTML template. Say one fine day you decide to look what disables a given field the instinct is to walk from HTML template towards the typescript code than the other ways.