無効なアトリビュートを切り替える方法については、

Question

私はいくつかのラジオボタンを持つアンプフォームを持っています。選択されたラジオボタンに応じて、入力フィールドを無効にするか有効にします。入力フィールドは、デフォルトで無効になっています。

入力に無効属性が含まれていると、フィールドは常に無効になります。私はdisabled = "disabled"を設定してからdisable = "enabled"に変更しようとしましたが、disabled属性の存在により動作しません。

私は=に使用

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

。： 『有効『または』無効」の変化のいずれかにhoursEnabled値を変更するにはAmp.setState ...』

AMPの制約の中でどのようにすることができます1つのトグル間無効と有効の状態？

Answer 1

をAMPは、ブール属性を削除または追加をサポートありません。

ブール式の結果はブール論理属性をトグルします。例： 。 exprがtrueと評価された場合、 要素に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 2

残念ながら、属性を削除すると、まだAMPは不可能である/追加。bind documentationあなたが[disabled]を使用できる状態にありませんが、私はそれがdisabled属性の存在を検出したすべてのブラウザがフィールドを扱いますW3C Specificationだと信じて無効。

しかし、無効にしたフィールドを模倣するには、次のような操作を行うことができます。

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

また、アンプ・リストを使用してこの問題を回避することができます。これは、送信時にオブジェクトのバインディングと一致する名前のフィールドが1つあるという利点があります。

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