Aurelia - Formas

En este capítulo, aprenderá a utilizar formularios en el marco de Aurelia.

Entrada de texto

Primero, veremos cómo enviar un inputformar. La vista tendrá dos formularios de entrada para nombre de usuario y contraseña. Usaremosvalue.bind para el enlace de datos.

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 función de registro simplemente tomará los valores de nombre de usuario y contraseña de las entradas y los registrará en la consola del desarrollador.

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

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

Caja

El siguiente ejemplo demostrará cómo enviar una casilla de verificación con el marco de Aurelia. Crearemos una casilla de verificación y vincularemos elchecked valor para nuestro modelo de vista.

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>

El envío del formulario simplemente registrará el checked valor en la consola.

app.js

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

Botones de radio

El siguiente ejemplo demostrará cómo enviar radio buttons. La sintaxisrepeat.for = "option of options"se repetirá a través de una matriz de objetos y creará un botón de radio para cada objeto. Esta es una forma ordenada de crear elementos dinámicamente en el marco de Aurelia. El descanso es el mismo que en los ejemplos anteriores. Estamos uniendo elmodel y el checked valores.

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>

En nuestro modelo de vista, crearemos una matriz de objetos this.optionsy especifique que el primer botón de opción esté marcado. De nuevo, elSUBMIT El botón simplemente iniciará sesión en la consola cuyo botón de opción esté marcado.

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 marcamos el tercer botón de radio y enviamos nuestro formulario, la consola lo mostrará.