Add readonly to FormControl formstate

[fank]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Currently there is a "disabled" flag which will disable the control, and also disable the validator. But there also should be a "readonly" flag which do not disable the validator.

Current behavior

• Does not exist -

Expected behavior

• Explained above -

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 2.0.0-rc.6
• Browser: [all]
• Language: [all]
• Node (for AoT issues): node --version = 6.5.0

[pkozlowski-opensource]

Why it should differ in terms of validation as compared to disabled? In both cases a user can't interact with a control (can't change it value) so there is no user input to validate...

Could you elaborate on your exact use-case?

[fank]

If i look from this side, you are right, both have exactly the same behaviour. Thanks for clearing :+1:

[dagstuan]

@pkozlowski-opensource A simple use case for a readonly control that needs validation would be a datepicker, where you dont want the user to enter a date via an <input type="text" />, but rather pop up a js-datepicker and populate the value of the input via the picker. If the input is disabled, browsers would not allow the user to interact with the input, but if it's readonly the user can still interact with it and it needs validation.

Currently it works well to just use bindings in the template for this functionality, but if the reasoning behind implementing enable() and disable() for form controls is to avoid using template bindings for this stuff, it makes sense to be able to set a control as readonly from the model as well.

[pkozlowski-opensource]

@dagstuan this use-case speaks to me!

[pkozlowski-opensource]

Well, actually partly only :-) If a control is a read-only then a icon to open a calendar should be disabled as well, right? Which means that a user still can't enter a date.

For me the only difference between disabled and readonly would be that the readonly field will be submitted while a disabled not. In both cases a user shouldn't be able to interact with the entire control....

I'm tempted to close it again :-)

[fank]

Our usecase for date inputs is, an default input[type="text"] with a datepicker on it. So the user can enter a date as normal but also can use the datepicker. We don't want to only provide a "datepicker" for our users because sometimes (its more the often one) they copy paste dates from something elsewhere and edit them manualy. So if we only provide them a datepicker it would be a wrong behavior, because its a input where you can "inject" something with a other tool, but can enter something on your own. So there is no usecase for a readonly.

[fank]

If you want that the user only enter something valid, than use a validator. and highlight it with styles.

[dagstuan]

@pkozlowski-opensource a browser will allow focus on a readonly input, but not on a disabled one, so if an input is read only it will still get focus if the user tabs trough the form or clicks on it.

@Fank sure, you can solve a datepicker by having an input that isn't readonly. However, people are going to solve this in different ways, and given that <input readonly /> is valid html it makes sense for reactive forms to have the attribute if the point is to avoid using template bindings to control the inputs (given the whole "changed after checked" debacle).

[kara]

I actually think this is a valid feature request. We were considering doing this already when designing the disabled functionality, so this issue should stay open.

[fank]

@kara i may would pick me this ticket, is there anything i need to know?

[kara]

@Fank this one still needs design and relies on some decisions we still need to make about attributes. I'd stay away for now. But there are definitely other tickets you can pick up in the meantime. Thanks for contributing!

[fank]

@kara can you please add the label "state: Needs Design".

[sandlunds]

I feel like a valid use case is that a user might not have permission to edit all the fields in a form, but still wants to see the validity of all fields before proceeding (and perhaps consult someone else about the invalid data). All form inputs are not necessarily created from scratch but it might be an existing object opened up for editing.

Currently we are using the disabled state when a user does not have the correct permissions, but read-only seems more correct.

[machtyn]

I have attempted to create a property and set it, then make [readonly]="isReadonly ? '' : null" But that fails. Allowing the user to be able to {value: theValue, readonly: myBoolean} would make things clearer and easier.

http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

[jasonkrot]

Hy, i also would like to see this. The problem is, disabled fields are not existing in the form.value. We have some fields, which come from a request. We would like to set them as readonly, and send their values also on form submit to another api. But now we have to get those values from the formControls, and set them in the request body, to be able to send them, making our life a bit harder. (i never really like the workarounds, even if it is a really rare case). Is someone working on this feature?

[sqrter]

The same problem, is there any way to disable a form control and send it on form submit? We have some pre-populated fields that must be submitted but user can't edit them.

[jellekralt]

I think @beakdoctor's use case is definitely valid, and I think another good reason to use readonly over disabled here is accessibility. From what I understand, (some) screen readers will not read the content of disabled fields, but will read readonly fields.

[ravikumarbggit]

I found a work around to access submitted disabled field using FormGroup's getRawValue() use this method instead of FormGroup.value in ngSubmit of your template.

Thanks to stack overflow answer

[kevincaradant]

Hi guys,

any news about a release with the readonly flag on the formControls attributes ?

Thank you :)

[srikanthps]

I want to track whether any inputs in form has changed - because UX of our form is such that "Save" button get enabled only if user actually changes any values - else it stays disabled. I was trying to implement a solution which did not rely on inspecting each field in form manually - so I was hoping to do something like below:

1. When form is first rendered, store the current value of form group in a component's member variable by using backup = this.myForm.getRawValue()
2. Register a subscriber for form value changes and compare the changed form with backed up form to detect if user changed any fields

      this.myForm.valueChanges.subscribe( data => {
             // Compare data (which is form's content) with backup and see if any fields have changed
      });

Unfortunately, there are two disabled fields in the form, and the values of those fields do not appear in data - if there was support in reset to make them read only, I would have received values of read-only fields in data.

To me it looks like a valid reason to for support of read-only in similar lines to disabled so that when I call this.myForm.reset({ myField : {value = "something", readonly: true} - the fields become read only. Currently, I am allowed only to use disabled: true.

[blackaillas]

Another use-case would be that a disabled textarea cannot be scrolled if it contains too much lines. While a readonly can be scrolled and so the full text can be read if needed.

[GoNode5]

https://www.w3.org/TR/html5/forms.html#attr-input-readonly ... (The difference between disabled and readonly is that read-only controls are still focusable, so the user can still select the text and interact with it, whereas disabled controls are entirely non-interactive. (For this reason, only text controls can be made read-only: it wouldn't make sense for checkboxes or buttons, for instances.)

[creativereason]

Another use case of this is because getting the values array of a reactive form-group doesn't return value (even if set) on form-controls that are disabled, but does return those that are read-only.

[ankitraonka]

much required

what if my form contain some fields which i want to disable and dont want its value to come in form.value

and other fields in the same form, i want them to be readonly and not disabled sk that thr value comes in form

[guilhermejcgois]

This wasn't solved?

[Aleph06]

I have a different use case, i want to use an input as a selector, i.e. suffix or focus event (when empty, readonly inputs can be focused) will open a dialog that will return some object or identifier. I know that maybe an autocomplete would be better but it's a user request to handle it this that way. Is there any final decision on this feature. A workaround would be a hidden input that gets populated from an independent control but i think i would be easier to use the readonly attribute.

[itsdevdom]

We'd also like to see the capability to set the readonly state programmatically - I think having a readonly is as valid / important as having a disabled state.

In our use case, specifically, we pre-fill parts of our forms with data coming from some backend service. Using the disabled state is not correct in my opinion, both in that:

• semantically speaking, the user is allowed to see and interact with the field (e.g. focus or select text) but not allowed to change it, meaning that it's only here to be read - but not generally unavailable (as disabled would suggest)
• the data within readonly fields should be submitted as well (which is not the case for disabled fields). Using the getRawValue() method is a workaround but I'd rather like to see it available in the Angular forms implementation itself

Further on, when having various re-usable form-related components, letting developers change form options such as disabled or readonly would be much simpler using Reactive Forms than creating some custom-implemented solution (e.g. properties, configuration, ...).

[julianobrasil]

It would be useful too when you want to switch readonly state from a directive, for examaple:

constructor(private _ngControl: NgControl) { }

private _switchToReadonly() {
  // that would be useful if this was possible
  this._ngControl.control.setReadonly(true);
}

[jotatoledo]

@ravikumarbggit thanks for the hint!

[Blair2004]

I don't know what is the state of the thread, but this is my use case.

I'm building a POS system and i would like the cashier to define the shipping fees. He can choose to apply a free shipping using a checkbox or define the shipping manually. If the shipping is free, the shipping fee field should be marked as "readonly" not disabled, since if it's disabled, the value doesn't appear on the FormGroup.value (don't know why) but it appear on the FormGroup.controls.

I would like to mark as readonly so that the cashier can't change the value 0 once the shipping is free.

Hope i've been clear.

Regards.