angular - Error : ngModel cannot be used to register form controls with a parent formGroup directive

Question

This is the parent component. Added a child component and passed the form. Here Using both the form Control Name & NgModel(Is this a best practice). While loading the page console error " ngModel cannot be used to register form controls with a parent formGroup directive."

<div class="inner-wrapper">   
    <form [formGroup]="form">
     <pat-demo-information [group]="form"></pat-demo-information>
     <div class="panel-body">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-3">
                <div class="ui-input-group">
                    <input type="text" maxlength="15" class="form-control" [(ngModel)]="notif.en.No" formControlName="epiNo">
                    <span class="input-bar"></span>
                            <label>No.</label>
                 </div>
            </div>
        </div>
     </div>  
</div>
</form>
</div>

This is the child component

@Component({
  selector: 'patient-demographic-information',
  templateUrl: './pat-demo-information'
})
export class PatDemoInfoComponent implements OnInit {

    @Input() patientForm: FormGroup
    noti: MaltreatmentNoti;


  instid: number;
  instPatientid: number;
  latitude: number;
  longitude: number;

  enMpi: Mpi = new Mpi();

  constructor(private formBuilder: FormBuilder) {

  }

  ngOnInit() {
    this.notification = new MaltreatmentNoti();
    this.notification.enMpi = new Mpi();
    yhis.getFromGroup();
  }


  private getFromGroup() {
    this.patientForm = this.formBuilder.group({
      'instPatientid': new FormControl('', Validators.compose([Validators.required])),

    })
  }
}

//child html

<div class="panel panel-default" [formGroup]="patientForm">
    <div class="panel-heading">Patient Information</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="ui-input-group">
                    <ng-select #reportInstitute [items]="selectInst" id="reportingInstitute"
                               [virtualScroll]="true" placeholder="Select" bindLabel="label" bindValue="value"
                               [(ngModel)]="instid" formControlName="patientInstId" required> 
                    <ng-template ng-option-tmp let-item="item" let-index="index">{{item.label}}</ng-template>
                    </ng-select>
                    <span class="input-bar"></span>
                    <label>Institution<span class="mdtr">*</span></label>
                <span *ngIf="patientForm.controls['patientInstId'].hasError('required') && (isError || patientForm.controls['patientInstId'].touched)" class="tooltiptext">{{'Institution is required'}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

Here using reactive forms for validation & for other wise use template driven, to get & set values.

while loading the page, an error in console.

RROR 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>

What would be the reason for this error ? what is the solution ? Thanks in advance.

标签： angularangular6angular7

Answer 1

同时使用表单控件名称和 NgModel（这是最佳实践）

不，这不是一个好习惯。

如果我们使用FormGroup，则不要使用 [(ngModel)].

不过，如果您想同时使用两者，则如错误本身所述，请使用ngModelOptions

 <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">