Amp-forms 如何切换禁用属性

Question

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

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

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

我使用 on="change:Amp.setState... 将值 hoursEnabled 更改为 "enabled" 或 "disabled".

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

Answer 1

遗憾的是，adding/removing 属性在 AMP 中尚不可用。 bind documentation does state that you can use [disabled] but I believe it's W3C Specification 任何检测到 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>

Answer 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" />

Answer 3

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

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.

这个有效：

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

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

Amp-forms 如何切换禁用属性

Amp-forms how to toggle disabled attribute

amp-html

google-amp

amp-bind