ngModel cannot be used to register form controls with a parent formGroup directive.

ERROR Error: 
      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 속성을 가진 태그의 하위 요소 중 ngModel을 사용하고있는 모든 요소는 formControlName 속성을 가지고 있어야 한다.

ngModel을 사용하는 모든 요소에 formControlName을 사용한다.

ts파일에서 formBuilder를 사용하여 form group을 생성하고, 필요한 formControlName을 모두 추가한다.

 

<!-- 에러 발생 -->
<div [formGroup]=formGroupName>
	<input type="text name="a" [(ngModel)]="testModel"/>
</div>

<!-- 에러 미발생 -->
<div [formGroup]=formGroupName>
	<input formControlName="inputTest" type="text name="a" [(ngModel)]="testModel"/>
</div>

// ts

constructor(
	public FormBuilder fb = FormBuilder;
){
 	this.fb.group({
    	a: [new FormControl(inputTest)],
    	b: [new FormControl(somethingTest)]
    });
}