AngularJS :: control must be defined as 'standalone' in ngModelOptions 오류 해결

---

오류 & 오류 원인

<form #f="ngForm">
    <input type="text" [(ngModel)]="userid" />
</form>

ngForm 과 ngModel 을 같이 사용하려고 할 때, 코드를 위와 같이 작성했더니 오류가 발생했습니다.

오류 내용을 읽어보니 ngModel을 사용하려면 name 속성을 사용하거나, ngModelOptions을 standalone으로 정의되어야 한다고 합니다.

ngModel만 사용할 때는 문제 없었는데, ngForm과 ngModel을 같이 사용하려고 하니 오류가 발생하네요.

ngForm과 ngModel을 함께 쓰려면 위 조건을 잘 지켜주어야 하는 것 같습니다.

---

오류 해결

해결 방법1

<form #f="ngForm">
    <input type="text" [(ngModel)]="userid" name="userid" />
</form>

name 속성을 주어서 해결할 수 있습니다.

해결 방법2

<form #f="ngForm">
    <input type="text" [(ngModel)]="userid" [ngModelOptions]="{standalone: true}" />
</form>

ngModelOptions을 standalone으로 정의하여 해결할 수 있습니다.

모든 입력 필드에는 속성 이름이 있는 것이 좋으니 더 좋은 해결 방법은 name 속성을 주어서 해결하는 것입니다.

---

참고자료

1. itecnote.com

---