条件付きで入力を非表示または表示する - AMP

Question

私はAccelerated Mobile Pages（AMP）を使用してフォームを作成しようとしており、ユーザーの選択に基づいて入力を非表示または表示する必要があります。

私が持っているユーザーは、国を選択できる場所 <select>：

<select name="country" id="country" required> 
    <option value="UK">United Kingdom</option> 
    <option value="ES">Spain</option> 
</select> 

を、ユーザーがイギリスを選択した場合、私は、この入力を非表示にする：私はすでに"on" attributeを使用してみましたが

<input type="text" id="idcard" name="idcard"> 
<input type="text" id="mobile" name="mobile"> 

<option>タグ内：

<option value="UK" on="tap:idcard.hide,mobile.hide">United Kingdom</option> 

でも動作しません。<select>タグでのみ有効です（documentationでも「すべての要素」と表示されています）。

<select>と<option>タグを使用する必要があります.2つだけでなく、多くの国があります。そうでなければ、ラジオ入力で "on"属性が機能します。

ユーザーの選択に基づいて入力を非表示または表示するために使用できるトリガーやイベントはありますか？

誰でも助けることができます。ありがとう！

Answer 1

あなたはselect要素にchangeイベントを使用し、選択し、その値に基づいた値をテストし、このようなshowまたはhideを評価するためにAMP状態プロパティvisibilityを設定することができます。

<select name="country" id="country" required 
     on="change:AMP.setState({visibility: event.value=='ES'?'hide':'show'})"> 
<option value="UK" >UK</option> 
<option value="ES" >Spain</option> 
</select> 

その後、可視性の値に入力のクラスをバインドします

<input type="text" id="idcard" name="idcard" 
     class="show" 
     [class]="visibility||'show'"> 
<input type="text" id="mobile" name="mobile" 
     class="show" 
     [class]="visibility||'show'"> 

次に、あなただけのCSSクラスが必要になります。

<style amp-custom> 
    .hide {display: none;} 
</style> 

あなたはアンペア・バインド・コンポーネントを含める必要があります。

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