Aurelia - Formulaires

Dans ce chapitre, vous apprendrez à utiliser les formulaires dans le framework Aurelia.

Saisie de texte

Tout d'abord, nous verrons comment soumettre un inputforme. La vue aura deux formulaires de saisie pour le nom d'utilisateur et le mot de passe. Nous utiliseronsvalue.bind pour la liaison de données.

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>

La fonction d'inscription prendra simplement les valeurs du nom d'utilisateur et du mot de passe des entrées et les enregistrera dans la console du développeur.

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

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

Case à cocher

L'exemple suivant montre comment soumettre une case à cocher avec le framework Aurelia. Nous allons créer une case à cocher et lier lechecked valeur à notre modèle de vue.

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>

La soumission du formulaire enregistrera simplement le checked valeur dans la console.

app.js

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

Boutons radio

L'exemple suivant montre comment soumettre radio buttons. La syntaxerepeat.for = "option of options"répétera à travers un tableau d'objets et créera un bouton radio pour chaque objet. C'est une manière intéressante de créer dynamiquement des éléments dans le framework Aurelia. Le repos est le même que dans les exemples précédents. Nous lions lemodel et le checked valeurs.

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>

Dans notre modèle de vue, nous allons créer un tableau d'objets this.optionset spécifiez que le premier bouton radio est coché. Encore une fois, leSUBMIT Le bouton se connectera simplement à la console dont le bouton radio est coché.

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);
   }
}

Si nous vérifions le troisième bouton radio et soumettons notre formulaire, la console l'affichera.