Aurelia - แบบฟอร์ม

ในบทนี้คุณจะได้เรียนรู้วิธีใช้แบบฟอร์มใน Aurelia framework

การป้อนข้อความ

ขั้นแรกเราจะดูวิธีการส่งไฟล์ inputแบบฟอร์ม. มุมมองจะมีสองรูปแบบการป้อนชื่อผู้ใช้และรหัสผ่าน เราจะใช้value.bind สำหรับการผูกข้อมูล

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>

ฟังก์ชั่นการสมัครใช้งานจะนำค่าชื่อผู้ใช้และรหัสผ่านจากอินพุตและบันทึกลงในคอนโซลของผู้พัฒนา

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

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

ช่องทำเครื่องหมาย

ตัวอย่างต่อไปนี้จะสาธิตวิธีการส่งช่องทำเครื่องหมายด้วย Aurelia framework เราจะสร้างช่องทำเครื่องหมายหนึ่งช่องและผูกไฟล์checked ให้คุณค่ากับมุมมองโมเดลของเรา

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>

การส่งแบบฟอร์มจะบันทึกไฟล์ checked ค่าในคอนโซล

app.js

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

ปุ่มวิทยุ

ตัวอย่างต่อไปนี้จะสาธิตวิธีการส่ง radio buttons. ไวยากรณ์repeat.for = "option of options"จะทำซ้ำในอาร์เรย์ของวัตถุและสร้างปุ่มตัวเลือกสำหรับแต่ละวัตถุ นี่เป็นวิธีการสร้างองค์ประกอบแบบไดนามิกในกรอบ Aurelia ส่วนที่เหลือจะเหมือนกับในตัวอย่างก่อนหน้านี้ เรามีผลผูกพันmodel และ checked ค่า

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>

ในมุมมองโมเดลของเราเราจะสร้างอาร์เรย์ของวัตถุ 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);
   }
}

หากเราตรวจสอบปุ่มตัวเลือกที่สามและส่งแบบฟอร์มของเราคอนโซลจะแสดงขึ้นมา