[Angular] FormGroup 관련 에러

Angular에서 FormGroup 사용 시 아래와 같이 에러가 발생할 경우 해결 방법에 대해 알아보겠습니다.

Error

ERROR Error: NG01350: ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
    formGroup's partner directive "formControlName" instead.  Example:


  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });

    Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

    Example:


  <div [formGroup]="myGroup">
      <input formControlName="firstName">
      <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
  </div>

해결 방법

에러 메시지 내용은 formGroup을 사용하려면 formControlName을 사용하거나 [(ngModel)] 사용 시 [ngModelOptions]="{standalone: true} 를 추가하라고 합니다.

아래와 같이 formGroup 속성이 있는 태그의 자식 중에 ngModel 속성을 사용하는 모든 태그에 formControlName 또는 [ngModelOptions]="{standalone: true}이 있어야 에러를 해결할 수 있습니다.

this.myForm = new FormGroup({
  id: new FormControl(''),
  name: new FormControl(''),
  title: new FormControl(''),
});

<form [formGroup]="myForm">
    <input type="text" formControlName="id">
    <input type="text" formControlName="name">
    <input type="text" [(ngModel)]="myForm.value.title" [ngModelOptions]="{standalone: true}">
</fom>

그리고 추가적으로 Typescript에서 FormBuilder를 통해 Group을 생성할 때 formControlName에 있는 값들을 전부 넣어줘야 됩니다.