Question

我有一个带有几个单选按钮的放大器。根据所选的单选按钮，我想禁用或启用输入字段。默认情况下禁用输入字段。

假设输入包含disabled属性，则始终禁用该字段。我试过设置disabled =＆＃34;禁用＆＃34;然后将其更改为禁用=＆＃34;启用＆＃34;但由于存在禁用属性，因此无法正常工作。

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

我使用on =＆＃34;更改：Amp.setState ...将值hoursEnabled更改为＆＃34;启用＆＃34;或者＆＃34;禁用＆＃34;。

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

Answer 1

不幸的是，在AMP中无法添加/删除属性。 bind documentation确实声明您可以使用[disabled]，但我相信W3C Specification任何检测到disabled属性存在的浏览器都会将该字段视为已停用。< / p>

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

＆＃13;

.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

布尔表达式结果切换布尔属性。例如：。当expr求值为true时， element具有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

Answer 3

您也可以使用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" />

Amp-forms如何切换禁用的属性

3 个答案: