Search code examples
amp-htmlgoogle-ampamp-bind

Amp-forms how to toggle disabled attribute


I have an amp-form with several radio buttons. Depending on the radio button selected I would like to disable or enable an input field. The input field is disabled by default.

Given that the input includes the disabled attribute the field is always disabled. I have tried setting disabled="disabled" and then changing it to disable="enabled" but the doesn't work due to the presence of the disabled attribute.

     [disabled]="formFeedBack.hoursEnable" disabled="disabled"

where I use on="change:Amp.setState... to change the value hoursEnabled to either "enabled" or "disabled".

Within the constraints of AMP how can one toggle between the disabled and enabled states?


Solution

  • AMP does support removing or adding boolean attributes.

    Boolean expression results toggle boolean attributes. For example: . When expr evaluates to true, the element has the controls attribute. When expr evaluates to false, the controls attribute is removed.

    This works:

    <form on="valid:AMP.setState({disable: false});>
    <input type="submit" disabled [disabled]="disable" value="Go"/>
    

    See in action here https://codepen.io/vercer/pen/vWEmNG