错误：ngModel 无法用于向父 formGroup 指令注册表单控件

Question

这是父组件。添加了一个子组件并传递了表单。这里同时使用表单控件名称和 NgModel（这是最佳实践吗）。加载页面控制台时出现错误“ngModel 无法用于向父 formGroup 指令注册表单控件。”

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

这是子组件

@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])),

    })
  }
}

//子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>

这里使用反应式表单进行验证，并使用模板驱动来获取和设置值。

加载页面时，控制台出现错误。

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>

这个错误的原因是什么？解决办法是什么 ？提前致谢。

Answer 1

同时使用控件名称和 NgModel 形式（这是最佳实践吗）

不，这不是一个好的做法。

如果我们使用FormGroup那就不要使用 [(ngModel)]。

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

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