앵귤러 directive - ngModel

ngModel은 앵귤러 디렉티브의 하나로 폼컨트롤을 생성하고 폼 안에 사용된 개개의 필드를 폼과 연결하는 역할을 합니다.

 

사용법

 

연결은 해당 필드에 name 속성을 추가하고 'ngModel' 디렉티브를 사용하여 폼과 연결하여 사용합니다. 

<!-- model.component.html -->

<form>
  <input type="text" name="title" ngModel />  
</form>

 

요소에 name 속성으로 지정된 이름 외 다른 이름을 사용하고 싶은 경우 아래와 같이 'ngModelOptions' 속성에 property binding 형식으로 옵션추가가 가능합니다.

<!-- model.component.html -->

<form>
  <input type="text" name="title" ngModel [ngModelOptions]="{name: 'user'}" />  
</form>

 

폼 안에 특정 필드를 폼 데이터에서 제외하고 싶은 경우 'strandalone' 옵션을 추가하면 됩니다.

<!-- model.component.html -->

<form>
  <input type="text" name="title" ngModel [ngModelOptions]="{standalone: true}" />  
</form>

 

ngModel을 활용한 template-driven-form 보러 가기

 

이외에도 특정 요소와 연결하여 two-way binding을 통해 입력된 값을 바로 보여주는 것도 가능합니다.

 

 

활용가능한 컨트롤 디렉티브 목록

https://angular.io/api/forms/AbstractControlDirective

Angular

 

이상으로 ngModel에 대해 알아보았습니다.

 

 

---

 

참고

Angular