Установите значение ввода по умолчанию с помощью Google AMP - PullRequest
Новая
       23

Установите значение ввода по умолчанию с помощью Google AMP

0 голосов
/ 30 октября 2019

Мне нужно установить значение по умолчанию для ввода текста в сочетании с селектором усилителя и пользовательской проверкой, но я буду знать входное значение в конце кода, поэтому я не могу установить его по атрибуту значения.

Давайте начнем с начала, атрибут «требуемый» не поддерживается для усилителя-селектора, поэтому мне пришлось сделать кастом, и он работает. 

<form method="GET" target="_top" custom-validation-reporting="show-first-on-submit">
    <input type="text" id="myInput" class="hidden" required [value]="product.item">
    <div visible-when-invalid="valueMissing" validation-for="myInput">This field is required.</div>
    <amp-selector on="select:AMP.setState({ product : { item : event.targetOption } })" layout="container">
        <div option="a">One</div>
        <div option="b">Two</div>
        <div option="c">Three</div>
    </amp-selector>
    <input type="submit">
</form>

Первый параметр этого селектора должен бытьвыбран, и моя первая попытка была просто: 

<form method="GET" target="_top" custom-validation-reporting="show-first-on-submit">
    <!-- Here I don't know the input value -->
    <input type="text" id="myInput" class="hidden" required [value]="product.item">
    <div visible-when-invalid="valueMissing" validation-for="myInput">This field is required.</div>
    <amp-selector on="select:AMP.setState({ product : { item : event.targetOption } })" layout="container">
        <!-- From here I know the input value, in this example "a" -->
        <div option="a" selected>One</div>
        <div option="b">Two</div>
        <div option="c">Three</div>
    </amp-selector>
    <input type="submit">
</form>

Это, очевидно, работает, но не на всех. Этот селектор является фальшивым полем, реальное поле - это входные данные с id = "myInput".

Итак, сейчас я думаю установить состояние по умолчанию, и я попытался с этим, но не сработал. .. 

<form method="GET" target="_top" custom-validation-reporting="show-first-on-submit">
    <input type="text" id="myInput" class="hidden" required [value]="product.item">
    <div visible-when-invalid="valueMissing" validation-for="myInput">This field is required.</div>
    <amp-selector on="select:AMP.setState({ product : { item : event.targetOption } })" layout="container">
        <div option="a" selected>One</div>
        <div option="b">Two</div>
        <div option="c">Three</div>
    </amp-selector>
    <input type="submit">
</form>
<amp-state id="product">
    <script type="application/json">{ "item" : "a" }</script>
</amp-state>

Я много искал, но не могу решить ..

Где ошибка? Как я могу решить?

Заранее спасибо

...