[Angular] ngModel , 데이터 양방향 바인딩

Q. 정보입력시 데이터 저장해주세요.

 

프로젝트를 진행하다보면 로그인, 검색기능등과 같이 입력한 데이터를 사용하는 기능들을 만들어야 할 때가 있다.

그럴때 사용하는것이 ngModel이며 사용방법을 알아보자.

 

ngModel

• 문법은 input태그에 [(ngModel)]="변수명" 으로 사용가능하다.
• ngModel은 input태그에만 사용이 가능하다.

<input type="text" [(ngModel)]="userId"/>

크게 대단한것없이 저렇게만 사용하면 끝이다. 해당 input에 사용자가 데이터를 입력하면 userId라는 변수에 데이터가 저장된다.

 

 

ngModel을 사용하기 위해서는 ngModel을 사용하고있는 컴포넌트의 모듈에서 FormsModule을 Import해주어야 한다.

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

@NgModule({
  declarations: [LoginComponent],
  imports: [
  //FormsModule 추가
    FormsModule,
  ],
  exports:[
    LoginComponent,
  ]
})
export class LoginModule { }

이렇게 추가를 해주면 ngModel이 사용가능하다.

 

여담으로 ngModel은 태그가 특이하게 생겨서 헷갈릴때가 있는데, 해외에서는 'banana in the box' 라고 부른다고한다.

역시 나만 헷갈리는게 아니였나보다.