CODEWITHSUNDEEP
angular
user3491169
user3491169

Reputation:

Angular2 RC6 disabled input

Previously in my Angular2 RC5 app I had an input element like the following:

<input type="text" formControlName="blah" disabled/>

The intent was to make this field non-editable by the user when in edit mode; hence the disabled attribute.

After upgrading to Angular2 RC6 I'm getting the following message in the console:

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

However, if I follow this advice, removing my disabled attribute and replacing my FormControl with disabled set to true, then that field does not post on submission (i.e. it does not appear in form.value).

Have I coded this situation incorrectly? Is there a way for a FormControl that is disabled to be included in the forms values?

As a side note I'm actually using FormBuilder opposed to setting up each individual FormControl if that makes a difference.

Upvotes: 14

Views: 14409

Answers (7)

Ali Adravi
Ali Adravi

Reputation: 22783

Here is the trick: this.form.getRawValue();, no need to change your for model.

In your component get the value by usein getRawValue and it will return values for disabled controls as well.

Here is my save method to test:

save() {       
    let data = this.form.getRawValue();
    if (!this.form.valid)
        return;
    ...................
    ...................
}

For more information see the last two paragraph on the page

Upvotes: 0

wrldbt
wrldbt

Reputation: 191

The correct answer as of Angular 2.4.1 and using the FormBuilder like you are

form: FormGroup;

constructor(private fb: FormBuilder) {

}

ngOnInit() {
    this.form = this.fb.group({
      blah: [{ value: '', disabled: true }]
});

and you can turn it on by calling

this.form.get("blah").enable();

or off by calling

this.form.get("blah").disable();

However, browsers should not allow submitting elements that are disabled. This popular question has some more information on that values of disabled inputs will not be submited?

There are various hacks and workarounds that people have come up with to avoid this such as hidden input fields, the readonly attribute, or enabling the fields before submitting.

Upvotes: 5

mlapaglia
mlapaglia

Reputation: 902

You need to use getRawValue()

see: Disabled input validation in dynamic form

https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#getRawValue-anchor

If you'd like to include all values regardless of disabled status, use this method. Otherwise, the value property is the best way to get the value of the group.

Upvotes: 1

Amy
Amy

Reputation: 131

I'm ok with this code.if you want to disable this.userForm.controls['UserID'].disable({ onlySelf: true }); if you want to enable
this.userForm.controls['UserID'].enable({ onlySelf: false });

Upvotes: 0

Toni I
Toni I

Reputation: 81

You can try to use readonly attribute in your input: <input type="text" [readonly]="true" />

Upvotes: 3

MMR
MMR

Reputation: 3029

You can get it like this,

In template:

<[disabled]="state"/>

In component:

 state:any = true;

Upvotes: -3

Emerceen
Emerceen

Reputation: 2885

Instead of the disabled attribute in a template , you can set the ' disabled ' instance FormControl to 'true '.

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

or

blah: FormControl = new FormControl('text');
blah.disabled = true;

Upvotes: 4

Related Questions