アウレリア-フォーム

この章では、Aureliaフレームワークでフォームを使用する方法を学びます。

テキスト入力

最初に、 input フォームを送信する方法を確認します。ビューには、ユーザー名とパスワードの2つの入力フォームがあります。データバインディングには value.bind を使用します。

appl

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

サインアップ機能は、入力からユーザー名とパスワードの値を取得し、開発者のコンソールに記録するだけです。

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

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

Aurelia Forms Input

チェックボックス

次の例は、Aureliaフレームワークでチェックボックスを送信する方法を示します。チェックボックスを1つ作成し、 checked 値をビューモデルにバインドします。

appl

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

フォームの送信では、 checked 値がコンソールに記録されるだけです。

app.js

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

Aurelia Forms Checkbox

ラジオボタン

次の例は、ラジオボタン*を送信する方法を示します。構文 *repeat.for = "option of options" は、オブジェクトの配列を繰り返し、各オブジェクトのラジオボタンを作成します。これは、Aureliaフレームワークで要素を動的に作成する適切な方法です。残りは前の例と同じです。 model 値と checked 値をバインドしています。

appl

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

ビューモデルでは、オブジェクトの配列 this.options を作成し、最初のラジオボタンがチェックされるように指定します。繰り返しますが、 SUBMIT ボタンは、ラジオボタンがオンになっているコンソールにログインするだけです。

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

3番目のラジオボタンをチェックしてフォームを送信すると、コンソールに表示されます。

Aurelia Forms Radio

Aurelia-forms

アウレリア-フォーム

テキスト入力

appl

チェックボックス

appl

app.js

ラジオボタン

appl

app.js

目次