錯誤：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}">

Answer 2

要使用ngModel您必須使用模板驅動的表單，您應該將FormsModule導入到您的ngModule 。 在這里，您正在使用ReactiveFormsModule哪些應該使用FormGroup創造formControls 。

在這里你不需要給formControlName 。 相反，您只ngModel帶有獨立選項的ngModel

對於模板驅動的表單，您應該使用 ngModel

<input type="text" maxlength="15" class="form-control" [(ngModel)]="notif.en.No" [ngModelOptions]="{standalone: true}">

在孩子

<ng-select #reportInstitute [items]="selectInst" 
id="reportingInstitute" [virtualScroll]="true" 
placeholder="Select" bindLabel="label" bindValue="value"
[(ngModel)]="instid" [ngModelOptions]="{standalone: true} required>

對於反應形式，您應該使用 fromControlName

<input type="text" maxlength="15" class="form-control"formControlName="epiNo">

在孩子

<ng-select #reportInstitute [items]="selectInst" 
id="reportingInstitute" [virtualScroll]="true" 
placeholder="Select" bindLabel="label" bindValue="value"
formControlName="patientInstId" required>

這個想法是你應該使用 ngModel 或 formControlName。

Answer 3

出於某種原因，我們必須混合使用 ngModel 和 formControlName。 我們使用 ngModel 作為數據，使用 formControl 進行驗證。

但這不是一個好方法。

我建議您從 Reactive & Template Driven 表單中選擇一種並用於您的整個應用程序。

參考： https : //blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Answer 4

不要將 [(ngModel)] 與 formcontrol 一起使用，因為它不是最佳實踐。

或者 ：-

你可以試試 [ngModelOptions]="{standalone: true}"

這將表明表單是獨立的，但請避免這樣做。