Angular : วิธีการ Input ข้อมูลจากฟอร์มอย่างง่าย

ในบทความนี้จะสอนเกี่ยวกับการรับข้อมูลเข้าผ่านฟอร์มอย่างง่าย
หัวข้อจะมีดังนี้
- สร้างฟอร์มด้วยโค้ด
- การแสดงผลข้อมูลที่รับเข้า
*******************************************************************
สร้างฟอร์มด้วยโค้ด
จะใช้วิธีการสร้างฟอร์มที่รับเข้าข้อมูลแบบ Object Element HTML
Step 1: เปิดไฟล์ app.component.html แล้วเขียนโค้ดดังนี้
<div style="text-align:center">
<h1>Form Input</h1>
<form> <input type="text" style="width: 30%;height: 30px;font-size: 20px" placeholder="username" #username>
<br>
<br>
<input type="password" style="width: 30%;height: 30px;font-size: 20px" placeholder="password" #password>
<br>
<br>
<input type="email" style="width: 30%;height: 30px;font-size: 20px" placeholder="email" #email>
<br>
<br>
<input type="submit" value=" Click! " style="font-size: 30px"(click)="InputData(username.value , password.value , email.value)"> </form>
</div>***** หมายเหต *****
.value จะเป็นการรับเข้าข้อมูลแบบ Object Element HTML นะครับ
Step 2: เปิดไฟล์ app.component.ts แล้วเขียนโค้ดดังนี้
// ประกาศตัวแปรเพื่อรับข้อมูลเเละกำหนดค่าเริ่มต้นให้กับตัวแปร
username: string = '';
password: string = '';
email: string = '';// สร้างฟังก์ชันเพื่อรับค่าข้อมูลที่ส่งมาจากฟอร์ม
InputData(username, password, email) { // นำตัวแปรที่ประกาศมารับค่าข้อมูลที่ส่งมาจากฟอร์มโดยใช้ this
this.username = username;
this.password = password;
this.email = email;
}
มาดูผลลัพธ์จากการสร้างฟอร์มด้วยโค้ด

การแสดงผลข้อมูลที่รับเข้า
จากที่กล่าวมาในหัวข้อที่ผ่านมาการรับเข้าข้อมูลแบบจะเป็น Object Element HTML แสดงว่าการเเสดงผลข้อมูลจะต้องเป็น Object Element HTML ด้วย
Step 1: เปิดไฟล์ app.component.html แล้วเพิ่มโค้ดดังนี้
<div style="padding-top: 3%">
<h1>Data</h1>
</div>
<div style="width: 100%;" >
<h2>Username:
<span style="color:green">{{username}}</span>
</h2>
<h2>Password:
<span style="color:red">{{password.value}}</span>
</h2>
<h2>Email:
<span style="color:blue">{{email.value}}</span>
</h2>
</div>***** หมายเหต *****
ข้อมูลที่รับเข้ามาเป็นแบบ Object Element HTML เเสดงว่าการเเสดงผลข้อมูลจากตัวแปรที่ได้ประกาศไว้จะต้องใส่.value ด้วยนะครับโดยใช้สัญลักษณ์ {{}} ในการเเสดงผลข้อมูล
ผลลัพธ์จากการเเสดงผลข้อมูล

แต่ถ้าไม่ใส่ .value จะได้ผลลัพธ์จากการเเสดงผลข้อมูลดังนี้

เสร็จเเล้ววววววการ Input ข้อมูลจากฟอร์ม
เป็นไงบ้างง่ายใช่ไหมละ !!!
******************************************************************
สรุป
ถ้าจะรับเข้าเเละเเสดงผลข้อมูลแบบ Object Element HTML จะต้องใส่ .value ด้วย
เครื่องมือ
- Angular Cli
- Visual studio Code
Link ตัวอย่าง : https://github.com/nitassrisanoi/Angular-Simple-Data-Reception