Angular2 RC6 disabled input

Question

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.

Yea I am in the same situation. Still wondering how they came up with the idea that not allowing user to freely edit a field means not caring about that field at all. — Harry Ninh, Sep 09 '16 at 02:44
Take a look at http://stackoverflow.com/questions/39374289/disabled-input-validation-in-dynamic-form/39475798#39475798 — user2363245, Sep 13 '16 at 17:29

score 5 · Answer 1 · answered Jan 11 '17 at 20:07

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.

score 4 · Answer 2 · answered Sep 02 '16 at 08:35

4

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;

answered Sep 02 '16 at 08:35

Emerceen

2,735
3
17
22

When I `disabled` it with instance FormControl than this field is not visible in my final/form object (is visible in the html form) – Kosmonaft Oct 11 '16 at 00:10
4

Can't do this , disabled is a getter only. – Milad Nov 30 '16 at 06:57

score 3 · Answer 3 · answered Sep 12 '16 at 06:57

3

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

answered Sep 12 '16 at 06:57

Toni I

81
3

I went for the *readonly* route, still with bound property as well: `` – superjos Dec 06 '16 at 21:14

score 1 · Answer 4 · edited May 23 '17 at 12:10

1

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.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 28 '16 at 16:52

mlapaglia

852
14
31

score 0 · Answer 5 · answered Sep 22 '16 at 09:56

0

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

answered Sep 22 '16 at 09:56

Amy

131
1
12

score 0 · Answer 6 · answered Mar 24 '17 at 20:26

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

score -3 · Answer 7 · answered Sep 03 '16 at 12:27

-3

You can get it like this,

In template:

<[disabled]="state"/>

In component:

 state:any = true;

answered Sep 03 '16 at 12:27

MMR

2,869
13
56
110

Angular2 RC6 disabled input

7 Answers7

Linked