2015-06-17 3 views
8

Ich habe Probleme beim Zurücksetzen des Etiketts in einem Papiereingabebehälter nach dem Absenden eines Formulars. Das Formular ist ein einfaches Anmeldeformular. Wenn sich ein Benutzer ohne Seitenaktualisierung (über den Browser) an-, abmeldet und wieder einloggt, scheint die Beschriftung so zu hängen, als ob in der Eingabe ein Wert vorhanden wäre.Zurücksetzen Polymerpapier-Eingabebehälter Wert und Etikett

Hier ist ein Bild, um den Unterschied zu zeigen:

login forms

Hier ist die Form innerhalb des Elements:

<form is="iron-form"> 

    <paper-input-container id="email_container"> 
     <paper-input-error>E-mail or Password is incorrect</paper-input-error> 
     <label>E-Mail Address</label> 
     <input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}"> 
     </paper-input-container> 

     <paper-input-container id="password_container"> 
      <label>Password</label> 
      <input is="iron-input" id="password" type="password" value="{{passwordInput::input}}"> 
     </paper-input-container> 

    <paper-button raised dialog-dismiss>Cancel</paper-button> 
    <paper-button raised on-tap="handleCsrf">Login</paper-button> 

</form> 

Diese beiden Ansätze die Form erhalten sowohl auf die „nach dem Login“ Zustand der gleich:

// 
this.emailInput = null; 
this.passwordInput = null; 

// 
this.emailInput = ""; 
this.passwordInput = ""; 

ich dachte, das würde Rese t der gesamte Behälter irgendwie, aber es tut nichts:

this.$.email_container = null; 
this.$.password_container = null; 

Antwort

1

iron-input

bindValue String Verwenden Sie diese Eigenschaft anstelle von Wert für Zwei-Wege-Datenbindung.

<paper-input-container id="email_container"> 
    <paper-input-error>E-mail or Password is incorrect</paper-input-error> 
    <label>E-Mail Address</label> 
    <input is="iron-input" id="email" on-blur="validateEmail" bind-value="{{emailInput::input}}"> 
    </paper-input-container> 

    <paper-input-container id="password_container"> 
     <label>Password</label> 
     <input is="iron-input" id="password" type="password" bind-value="{{passwordInput::input}}"> 
    </paper-input-container> 

Mit bindValue offenbar beide this.emailInput = null und this.set('emailInput, null) den Trick.

+0

Die für benutzerdefinierte Eingaben wie '' zu sein scheint. Meins ist nur eine regelmäßige Eingabe als Eisen-Input. Es ist fast wörtlich aus den Polymer-Dokumenten. – anthony

+0

Versucht dies ist nicht das Problem zu lösen. Ich glaube auch, dass die Syntax dies ist. $. emailInput = null –

+0

'bind-value' -Eigenschaft implementiert Zwei-Wege-Bindung. Die 'value' -Eigenschaft benachrichtigt nur aufgrund von Benutzereingaben. Dann greifen Sie auf die Zwei-Wege-Bindung über 'event.target.bindValue' im' tapp-'Event-Handler oder' this.email.bindValue' (mit der ID 'email') zu. Relevanter Dokument [hier] (https://elements.polymer-project.org/elements/iron-input). – user982671

-1

Sie können eine komplette iron-form zurücksetzen, indem Sie die reset() Methode aufrufen:

document.getElementById('idOfForm').reset(); 
0

Ich bin nicht sicher, warum die erste Form nicht funktioniert (ich bin ein Papier-Eingang verwendet wird, nicht Eisen-Eingang , und es hat dort funktioniert), ist es möglich, dass das Problem irgendwo im Code nicht gezeigt wird. Aber etwas anderes zu versuchen, direkt den Wert setzt:

this.$.email.value = null; // where 'email' is the ID of the iron-input 

Ich bin nicht ganz sicher, wie dies mit bind-value interagieren, aber die docs sagen

iron-input die bind-value Eigenschaft fügt hinzu, dass der Spiegel value Eigenschaft

Verwandte Themen