1

我有一个带有几个单选按钮的 amp-form。根据选择的单选按钮，我想禁用或启用输入字段。默认情况下禁用输入字段。

鉴于输入包含 disabled 属性，该字段始终处于禁用状态。我尝试设置 disabled="disabled" 然后将其更改为 disable="enabled" 但由于 disabled 属性的存在而不起作用。

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

我使用 on="change:Amp.setState... 将值 hoursEnabled 更改为“启用”或“禁用”。

在 AMP 的限制下，如何在禁用和启用状态之间切换？

4

3 回答 3

4

AMP 确实支持删除或添加布尔属性。

布尔表达式结果切换布尔属性。例如： 。当 expr 计算为真时，该元素具有 controls 属性。当 expr 评估为 false 时，将删除 controls 属性。

这有效：

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

在此处查看实际操作https://codepen.io/vercer/pen/vWEmNG

于 2017-10-30T10:20:50.590 回答
3

不幸的是，在 AMP 中还不能添加/删除属性。绑定文档确实说明您可以使用，[disabled]但我相信它是W3C 规范，任何检测到disabled属性存在的浏览器都会将该字段视为禁用。

但是，您可以执行以下操作来模仿禁用字段。

.hide {
  display: none;
}
<script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
        
    <form method="post" action-xhr="#">
          <label><input type="radio" name="fields" on="change:AMP.setState({disableFirst: event.value, disableSecond: event.value ? false : true})"> Disable 1st Field</label><br>
        <label><input type="radio" name="fields" on="change:AMP.setState({disableSecond: event.value, disableFirst: event.value ? false : true})"> Disable 2nd Field</label><br>
        <label>First Field</label>
        <input [class]="disableFirst ? 'hide' : ''" type="text" name="firstField" [value]="firstFieldValue" on="input-debounced:AMP.setState({firstFieldValue: event.value})" />
        <input class="hide" [class]="disableFirst ? '' : 'hide'" type="text" name="fakeFirstField" [value]="firstFieldValue" disabled="disabled" />
<br>
        <label>Second Field</label>
        <input [class]="disableSecond ? 'hide' : ''" type="text" name="secondField" [value]="secondFieldValue" on="input-debounced:AMP.setState({secondFieldValue: event.value})" />
        <input class="hide" [class]="disableSecond ? '' : 'hide'" type="text" name="fakeSecondField" [value]="secondFieldValue" disabled="disabled" />
    </form>

于 2017-10-27T03:50:08.457 回答
2

您也可以使用 amp-list 解决此问题。好处是您将拥有一个名称与提交时的对象绑定相匹配的字段。

amp-list 需要一个有效的 src json。如果你将它指向一个有效的 json 格式，那么输入框将在页面首次加载时显示：

{
  "items": [ { "disabled": "enabled" } ]
}


<script src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>

    <amp-state id="inputState">
        <script type="application/json">
            {
                "items" : [ { "disabled": "enabled" } ],
                "city" : ""
            }
        </script>
    </amp-state>

      <input type="radio" value="1" name="rb" id="rb1" class="relative" checked on="change:AMP.setState({inputState:{disabled:'enabled'}})" />
      <label for="rb1" class="" aria-hidden="true">Enable City Box</label>
      <input type="radio" value="2" name="rb" id="rb2" class="relative" on="change:AMP.setState({inputState:{disabled:'disabled'}})" />
      <label for="rb2" class="" aria-hidden="true">Disable City Box</label>
      <amp-list width="auto" height="25" src="https://myserver/stuff/itemsEnabled.json" [src]="inputState">
          <template type="amp-mustache">
              <label for="q">City</label>
              <input id="q" name="q" placeholder="City" type="text" {{disabled}}="{{disabled}}" value="{{city}}" on="change:AMP.setState({inputState:{city:event.value}})" />
          </template>
      </amp-list>
      <input id="x" name="x" placeholder="Country" type="text" />
      <input type="submit" />

于 2017-10-27T04:52:58.883 回答