ngModel cannot be used to register form controls with a pare

Question

After Add  below code for dropdown validation

<form #GroupForm1="ngForm" [formGroup]="filtersForm" (ngSubmit)="onSubmit(GroupForm1)" > 

 

<th>

<select formControlName="Dropdown" style="width:100%;height:30px" (change)="selectedGroupID($event.target.value)" >

<option [value]="null">--Select--</option>

<option [value]="prot.GroupID" *ngFor="let prot of ProductGroupdataAll" >

{{prot.Group}}

</option>

</select>

<span *ngIf="hasDropDownError">Enter Country ...</span>

</th>

 

 getting below error.

 

 

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>

"

Angular 9

View_groupComponent_2 groupComponent.html:82

Angular 32

RxJS 5

Angular 11

groupComponent.html:74:37

ERROR CONTEXT

Object { view: {…}, nodeIndex: 49, nodeDef: {…}, elDef: {…}, elView: {…} }

groupComponent.html:74:37

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>

"