2015-04-29 3 views
0

Я пытаюсь сделать динамическую проверку на моем приложении для полимера Я хочу сделать #login-button атрибут кнопки disabled, когда входы пусты и удалить этот атрибут, когда вменения заполнены идентификатором и паролем. Я пробовал сделать html5 required атрибут, но это решение не работает. Теперь я создал функцию button-click, чтобы удалить мой Api, и я хочу добавить функцию проверки.Подтвердить ввод полимера при наблюдении данных

<form id="form_login"> 
      <paper-input aria-required="true" name="name" floatingLabel label="Id*" 
         value="{{name}}"></paper-input> 
      <br> 
      <paper-input-decorator floatingLabel label="password"> 
       <input aria-required="true" id="password" is="core-input" name="password" type="password" 
         value="{{password}}"/> 
      </paper-input-decorator> 
      <br> 


      <div class="page-holder" horizontal layout center center-justified> 

      </div> 

      <div class="page-holder" horizontal layout center center-justified> 
       <paper-button id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button> 
      </div> 
     </form> 

Мой Сценарий:

Polymer('login-page',{ 
     buttonClick: function() { 
       this.$.ajaxSubmit.go(); 
     }, 
     responseChanged: function (oldValue) { 
      console.log(this.response); 
      document.querySelector('app-router').go('/profile?hash=dfsasdsf'); 

     } 
    }); 
</script> 

ответ

2

disabled?={{!name || !password}} из paper-button может проверить пустые значения в этом случае. Так вот как я бы это сделать:

<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html"> 
 
<link rel="import" href="http://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html"> 
 
<link rel="import" href="http://www.polymer-project.org/0.5/components/core-elements/core-elements.html"> 
 

 
<body fullbleed layout vertical> 
 
    <form-elem></form-elem> 
 
</body> 
 
<polymer-element name="form-elem" noscript> 
 
    <template> 
 
    <paper-input aria-required="true" floatingLabel label="Id*" value="{{name}}"></paper-input> 
 
    <br> 
 
    <paper-input-decorator floatingLabel label="password"> 
 
     <input aria-required="true" id="password" is="core-input" type="password" value="{{password}}" /> 
 
    </paper-input-decorator> 
 
    <br> 
 
    <div class="page-holder" horizontal layout center center-justified></div> 
 
    <div class="page-holder" horizontal layout center center-justified> 
 
     <paper-button disabled?="{{!name || !password}}" id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button> 
 
    </div> 
 
    </template> 
 
</polymer-element>

Вот jsfiddle версия, если это необходимо: jsfiddle

+0

Работает как шарм, спасибо! –

Смежные вопросы