Как отключить кнопку в полимере до тех пор, пока поле не будет действительным?

Question

Мне нравится создавать базовый диалог с полимером. Пользователь должен ввести название категории, и если он что-то введет, он может нажать кнопку, чтобы сохранить/отправить его. Кнопка должна быть отключена, если в поле категории нет значения или пока в поле категории есть ошибка проверки.

Я пробовал это, но он не устанавливает кнопку для отключения вначале.

<paper-input required auto-validate invalid="{{invalid}}"></paper-input> 
<paper-button disabled$="[[invalid]]">Send</paper-button> 

Polymer({ 
    is: 'list', 
    properties: { 
     invalid: { 
      type: Boolean 
     }, 
     ... 

Если я использую функцию validate() на входе, чтобы вычислить значение кнопки будет также вызвать недопустимое состояние (ошибка Msg) на входе, хотя пользователь не может быть наведена что-то еще.

Как я могу обойти это?

Код: paper-input; paper-button

Maria's предложение с iron-form:

<form is="iron-form" method="get" action="/" id="eventsDemo"> 
    <paper-input name="name" label="Name" required auto-validate></paper-input> 
    <paper-button raised disabled id="eventsDemoSubmit"> 
</form> 

<script> 
    eventsDemo.addEventListener('change', function(event) { 
    // Validate the entire form to see if we should enable the `Submit` button. 
    eventsDemoSubmit.disabled = !eventsDemo.validate(); 
    }); 
    document.getElementById('eventsDemo').addEventListener('iron-form-submit', function(event) { 
    eventsDemoSubmit.disabled = false; 
    }); 
    ... 

Answer 1

Вы можете использовать вычисленный привязку, которая принимает как invalid и value в качестве аргументов.

<paper-button disabled$="[[isDisabled(invalid, value)]]">Enable on valid input</paper-button> 

Функция isDisabled затем проверит, чтобы значение было установлено. Например, например:

isDisabled: function(invalid, value) { 
    return invalid || value.length === 0; 
} 

Answer 2

Вот один из возможных решений: Plunk

<paper-input 
       label="Insert number from the range [1, 10]" 
       id="step" 
       type="number" 
       min="1" 
       max="10" 
       value="{{value}}" 
       editable 

       required 

       auto-validate="true" 
       invalid="{{invalid}}" 
       preventInvalidInput 
       error-message="value: {{value}} - means invalid is {{invalid}}" 

       on-change="stepChange"> 

</paper-input> 


     <br> 
     value: {{value}} 
     <br> 
     invalid: {{invalid}} 
     <br><br><br> 
     <paper-button raised disabled$="{{invalid}}">Enable on valid input</paper-button> 

Answer 3

Я не уверен, если я полностью получу ваши требования. Вы наверняка можете попробовать computed bindings и computed properties. У вас есть хороший чит-лист здесь https://meowni.ca/posts/polymer-cheatsheet/