Components: Md-Select needs readonly attribute

[PTC-JoshuaMatthews]

It has a disabled attribute, but the issue with that is if you set the form control it is bound with to disabled then the form no longer validates the control, and the form.value object no longer contains the disabled control. What we really need is to leave the form control enabled, but set the md-select to readonly so that the value cannot be changed by the user, but it is still part of the form. I could bypass the form all together and set the md-select to disabled from the template, but then there are errors in console about using disabled within a reactive form.

[dahaupt]

@PTC-JoshuaMatthews I had the same thought a few weeks ago, but why would you re-validate a pre-filled disabled md-select? It's value shouldn't be sent again to the server if it is just a disabled form control field. So I think you don't have to validate it again.

[PTC-JoshuaMatthews]

@dahaupt Its not that I want to re-validate it, but the value should be sent to the server again. It is only disabled under certain conditions. On the api side, the value that is sent is used to update the record, but on the client I want to restrict the user from changing the value under some conditions, but still need to send it to the server. So again, the select really isn't meant to be disabled, it is meant to be readonly but that isn't an option, hence this request.

[dahaupt]

@PTC-JoshuaMatthews Ok, I understand your point. So the easiest thing would be to sent the full form, no matter which selects or inputs are disabled. So we need kind of a workaround to get disabled selects or even inputs in the form.value object. I'm not sure if this is not changeable due to the ReactiveFormsModulebehind that.

[PTC-JoshuaMatthews]

@dahaupt Also you are correct that technically I could re-evaluate the conditions that set the disabled select's value on the client, on the server, and set the value that I didn't get from the disabled select on the api side. This seems like overkill through when the form should be able to handle this on the client. I think the same argument as to why we have readonly inputs applies to selects as well.

[PTC-JoshuaMatthews]

@dahaupt In respone to your last comment, there is away to get the disabled controls value form the form, you just have to go to it manually though form.controls["control"].value. I don't think it should be the ReactiveFormModule's responsibilty to give us a way to include disabled controls on form.value, and I don't think they shoud be present by default either. I think it is each controls responsibility to provide a readonly state. Again if we did it for md-input, why not md-select? Well I guess the answer to that is that html select doesn't have readonly property, but seems to me these properties are not really one-to-one with standard html anyway and they are being used to determine how the form behaves, so I think any form control should have a readonly state that locks the control without disabling it on the form.

[kara]

@PTC-JoshuaMatthews It seems like you should also be able to use the getRawValue() function that ships with the ReactiveFormsModule. It serializes all control values, including those that are disabled. That way, you could disable the control, but grab all the values you need to send to the server. Does that work for your use case?

[crisbeto]

@PTC-JoshuaMatthews I'm not sure we'd want to do this. md-select is supposed to mirror the native select which doesn't support readonly either.

[dahaupt]

@crisbeto Using the way @kara described is fine from my point of view, but for new developers, this could get tricky again and again. We don't need a readonly attribute because visually it's the same as disabled, right? We just need an easy way to send a full form object with disabled formControl values.

[PTC-JoshuaMatthews]

@kara But maybe I don't want all of the disabled form control values, I just want this one that really isn't disabled but instead from a behavioral standpoint readonly. It isn't really that big of a deal, as I've stated there is away to get the value for a given control regardless of disabled state, I just thought it would be nice to have a readonly state that prevents the user from editing and still is enabled on the form.

@crisbeto I realized the same thing, but again these attributes are being used by ReactiveFormsModule in different ways so not sure we really need to adhere to the html counterparts.

@dahaupt I would argue that we do need a readonly attribute (maybe not on the html control itself, but at least of the form control), because even if visually it is the same, functionality wise the form treats it differently. I guess what we really need is a property on the form control to set it to readonly, which would have the same effect on the html element as disabled, but signal the form not to exclude that control from the value.

[kara]

@PTC-JoshuaMatthews The more I think about this, the more I think this should be addressed in core forms. There is an existing issue for me to add a readonly state to form controls here: https://github.com/angular/angular/issues/11447

I'm hoping to get to this in the near future. It would inform how custom accessors like md-select would handle readonly state. I'm not sure it makes sense for us to implement this feature in select now when we'd have to re-write it in a few months. I'm going to close this for now, but we should re-open if/when there is better readonly support in core.

[PTC-JoshuaMatthews]

@kara Yup exactly the conclusion I came to as well in the last part of my last comment, needs to be a property of the formControl. Thanks for talking through it with me!

[IAMRogerXi]

It's not necessary to include the 'readyonly' attribute. Pull the selected option from the data source and display it in matInput, which should meet your requirement.

[PTC-JoshuaMatthews]

@IAMRogerXi Seeings that these are "Reactive" Forms, we shouldn't have to rig up an alternative HTML snippet to show the readonly data while leaving the form control in an enabled state. The idea of how setDisabled() works is already well thought out, you set it on the form control and the UI element reacts to it. There just needs to be a way to cause the same reactive effect to the UI (disabling the element) without removing the value of the form control from form.value as is the case when setDisabled() is called.

setReadonly() makes sense to me. But even adding a switch to the setDisabled() method to notify the form not to remove the control from form.value would be sufficient.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}