Aurelia - Formen

In diesem Kapitel erfahren Sie, wie Sie Formulare im Aurelia-Framework verwenden.

Text Eingabe

Zuerst werden wir sehen, wie man eine einreicht inputbilden. Die Ansicht enthält zwei Eingabeformulare für Benutzername und Passwort. Wir werden verwendenvalue.bind zur Datenbindung.

app.html

<template>  
   <form role = "form" submit.delegate = "signup()">
      
      <label for = "email">Email</label>
      <input type = "text" value.bind = "email" placeholder = "Email">

      <label for = "password">Password</label>
      <input type = "password" value.bind = "password" placeholder = "Password">

      <button type = "submit">Signup</button>
   </form>
</template>

Die Anmeldefunktion übernimmt lediglich die Werte für Benutzername und Kennwort aus den Eingaben und protokolliert sie in der Entwicklerkonsole.

export class App {
   email = '';
   password = '';

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

Kontrollkästchen

Das folgende Beispiel zeigt, wie Sie ein Kontrollkästchen mit dem Aurelia-Framework senden. Wir werden ein Kontrollkästchen erstellen und das bindenchecked Wert für unser Sichtmodell.

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
   
      <label for = "checkbox">Checkbox</label>
      <input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
      <button type = "submit">SUBMIT</button>
      
   </form>
</template>

Das Absenden des Formulars protokolliert nur das checked Wert in der Konsole.

app.js.

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

Radio Knöpfe

Das folgende Beispiel zeigt, wie Sie einreichen radio buttons. Die Syntaxrepeat.for = "option of options"wird durch ein Array von Objekten wiederholt und ein Optionsfeld für jedes Objekt erstellt. Dies ist eine gute Möglichkeit, Elemente im Aurelia-Framework dynamisch zu erstellen. Der Rest ist der gleiche wie in den vorherigen Beispielen. Wir binden diemodel und das checked Werte.

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
	
      <label repeat.for = "option of options">
         <input type = "radio" name = "myOptions" 
            model.bind = "option" checked.bind = "$parent.selectedOption"/>
            ${option.text}
      </label>
      <br/>
		
      <button type = "submit">SUBMIT</button>
   </form>
</template>

In unserem Ansichtsmodell erstellen wir ein Array von Objekten this.optionsund geben Sie an, dass das erste Optionsfeld aktiviert ist. Wieder dieSUBMIT Mit der Schaltfläche wird nur in der Konsole angemeldet, welches Optionsfeld aktiviert ist.

app.js.

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text:'First'}, 
         {id:2, text:'Second'}, 
         {id:3, text:'Third'}
      ]; 
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log('checked: ' + this.selectedOption.id);
   }
}

Wenn wir das dritte Optionsfeld aktivieren und unser Formular senden, wird es von der Konsole angezeigt.