Железная форма не подается на вход с бумажным вводом
Я тестирую с помощью iron-form
с пользовательскими элементами. У меня проблема в том, что форма не отправляется, когда я нажимаю клавишу ввода. Например, эта форма работает здесь:
<iron-form>
<form id="loginForm">
<paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
<div class="card-content">
<input type="text" label="Username" value="{{username}}">
<input type="text" label="Password" value="{{password}}">
</div>
<div class="card-actions">
<button disabled$="[[fetching]]" type="submit">Login</button>
</div>
</paper-card>
</form>
</iron-form>
У меня есть прослушиватель событий в моем методе connectedCallback для прослушивания iron-form-presubmit event
connectedCallback() {
super.connectedCallback();
this.addEventListener('iron-form-presubmit', function(event) {
event.preventDefault();
alert('working')
});
}
Проблема в том, что когда я переключаю элементы ввода html на элементы ввода бумаги, форма больше не отправляется при вводе.
<iron-form>
<form id="loginForm">
<paper-card heading="Welcome Back!" elevation="1" animated-shadow="true">
<div class="card-content">
<paper-input type="text" label="Username" value="{{username}}"></paper-input>
<paper-input type="text" label="Password" value="{{password}}"></paper-input>
</div>
<div class="card-actions">
<button disabled$="[[fetching]]" type="submit">Login</button>
</div>
</paper-card>
</form>
</iron-form>
1 ответ
Решение
Ты можешь использовать <iron-a11y-keys>
вызвать метод отправки, когда [enter]
клавиша нажата.
<iron-a11y-keys target="loginForm" keys="enter" on-keys-pressed="submit"></iron-a11y-keys>
<iron-form id="loginForm">
...
</iron-form>
В вашем пользовательском определении элемента добавьте метод:
submit: function () {
this.$.loginForm.submit();
}