วิธีแก้ปัญหา can't bind to 'ngmodel' ใน Angular

สำหรับใครที่เริ่มต้นเขียน Angular อาจจะเคยเจอข้อความผิดพลาดว่า can't bind to ngmodel' since it isn't a known property บทความนี้จะมาพูดถึงว่าปัญหานี้เกิดจากอะไร และสามารถแก้ไขได้อย่างไร

ตัวอย่าง วิธีแก้ปัญหา cant bind to ngmodel ใน Angular

ปัญหานี้ส่วนมากเกิดจากการใช้ Two-way data binding จากคำสั่ง [(ngModel)] ที่ template เพื่อผูกกับตัวแปรในไฟล์ .ts แต่ไม่ได้ import FormsModule ไปยัง module ที่ใช้งาน

1. เปิดไฟล์ module ที่ใช้งานเช่น app.module.ts ใน /src/app/ และเพิ่มการ import FormsModule ไว้ด้านบน

import { FormsModule } from '@angular/forms';

2. เพิ่ม FormsModule ไว้ใน imports

imports: [
	...,
    FormsModule
],

3. ตรวจสอบว่าใช้คำสั่ง Two-way data binding ได้ถูกต้อง ให้เปลี่ยน <variable_name> เป็นชื่อตัวแปรที่ต้องการ

[(ngModel)]="<variable_name>"

1. ไม่ได้ import FormsModule ไปยัง module ที่ใช้งาน

2. เขียนคำสั่ง [(ngModel)] ผิด