폼양식 엘리먼트에 FormControl 인스턴스를 생성하고 엘리먼트에 바인딩하는 기능을 한다.
FormControl은 폼양식요소노드의 값과 유효성상태를 추적한다.
NgModel 디렉티브는 FormsModule라이브러리가 모듈에 로드되어야 사용가능하다.
<input type="text" ngModel="data1" >ngModel디렉티브는 FormControl 인스턴스를 생성하고 data1이라는 문자열을 할당하므로 input폼요소노드는 값을 가지게 된다.
이것은 현재 바인딩되지 않은 상태다.
<input type="text" ngModel="data1" id="input:name" >
<button (click)="fn()">click</button>input폼요소노드의 유효성검사를 하려면 앵귤러가 제공하는 기능으로 요소노드를 참조하는 변수가 필요하다. 자바스크립트가 제공하는 메소드로는 접근할수는 있어도 유효성프로퍼티를 알수가 없다.
<input type="text" ngModel="data1" id="input:name" #inp="ngModel" required >
<button (click)="fn(inp.valid)">click</button>템플릿참조변수를 만들어서 버튼 템플릿실행문에 인자로 유효성프로퍼티를 보내어 출력하려고 한다.
하지만 에러가 발생한다. ngModel이 exportAs로 인스턴스를 지원하지 못한다는 것이다.
input폼요소노드의 값과 ngModel이 바인딩되지 않은 상태이므로 참조변수가 값의 상태를 알수가 없기때문이다.
<input type="text" [ngModel]="data1" id="input:name" #inp="ngModel" required >
<button (click)="fn(inp.valid)">click</button>[ngModel]="expr"으로 프로퍼티바인딩을 해주어야 템플릿참조변수가 제대로 작동한다.
ngModel디렉티브는 값을 가지는 폼양식요소노드에 사용하며 값과 유효성상태를 추적하는 기능을 한다.
따라서 이 기능을 사용하려면 바인딩을 해야 한다.
<input type="text" [ngModel]="data1" (ngModelChange)="setUppercaseName($event)" >(ngModelChange) 이벤트바인딩으로 템플릿실행문을 호출할 수 있으며 이때 $event는 ngModel의 이벤트객체인데 값을 추적하는 인스턴스의 이벤트는 변경된 값이 이벤트객체가 된다.
