Aurelia Forms

In the previous tutorial, we learned Aurelia Animations. In this lesson we will tackle Aurelia Forms. Forms are used in Aurelia framework as text input.

Here’s how to submit an Input Form.

<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>

Two Input Forms is with our View for username and password. And then value.bind is for data binding

app.html

export class App {


  email = ;
  password = ;

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

Basically the signup function just takes the username and password from the input forms and bring it to the developers console.

CheckBox

This is how to submit a checkbox in an Aurelia framework. A checkbox will be bound checked value to our view-model.

<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>

When you submit the form, it will just log “checked” value in the console

app.js

export class App  {

  constructor() {
     this.isChecked = false;
  }
 
  submit(){
     console.log(“isChecked: “ + this.isChecked);
  }
}

Radio Buttons

Lastly, this will show you how ti submit radio buttons. The syntax is repeat.for=”option of options”, as the name implies, it will repeat through an array of objects and create a radio button for each item. Its the trick on how to create elements dynamically in Aurelia framework.

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>

Same as the previous examples, we bind model and checked values.

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

An array of objects were created in the view-model and specified that the first radio button will be checked. Then again SUBMIT button will simply log the console in which radio button is checked.

On the next tutorial, we will discuss Aurelia HTTP.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.