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

Nitas Srisanoi
Sep 2, 2018 · 2 min read

ในบทความนี้จะสอนเกี่ยวกับการรับข้อมูลเข้าผ่านฟอร์มอย่างง่าย
หัวข้อจะมีดังนี้

  • สร้างฟอร์มด้วยโค้ด
  • การแสดงผลข้อมูลที่รับเข้า

*******************************************************************

สร้างฟอร์มด้วยโค้ด

จะใช้วิธีการสร้างฟอร์มที่รับเข้าข้อมูลแบบ 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 จะได้ผลลัพธ์จากการเเสดงผลข้อมูลดังนี้

ผลลัพธ์ไม่ใส่ .value

เสร็จเเล้ววววววการ Input ข้อมูลจากฟอร์ม
เป็นไงบ้างง่ายใช่ไหมละ !!!

******************************************************************

สรุป
ถ้าจะรับเข้าเเละเเสดงผลข้อมูลแบบ Object Element HTML จะต้องใส่ .value ด้วย

เครื่องมือ

  • Angular Cli
  • Visual studio Code

Link ตัวอย่าง : https://github.com/nitassrisanoi/Angular-Simple-Data-Reception

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade