title: Error : ngModel cannot be used to register form controls with a parent formGroup directive
body: <p>This is the parent component. Added a child component and passed the form. Here Using both the form Control Name &amp; 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."</p>
  
  <pre><code>&lt;div class="inner-wrapper"&gt;   
      &lt;form [formGroup]="form"&gt;
       &lt;pat-demo-information [group]="form"&gt;&lt;/pat-demo-information&gt;
       &lt;div class="panel-body"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-2 col-md-3 col-sm-3"&gt;
                  &lt;div class="ui-input-group"&gt;
                      &lt;input type="text" maxlength="15" class="form-control" [(ngModel)]="notif.en.No" formControlName="epiNo"&gt;
                      &lt;span class="input-bar"&gt;&lt;/span&gt;
                              &lt;label&gt;No.&lt;/label&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the child component</p>
  
  <pre><code>@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])),
  
      })
    }
  }
  </code></pre>
  
  <p>//child html </p>
  
  <pre><code>&lt;div class="panel panel-default" [formGroup]="patientForm"&gt;
      &lt;div class="panel-heading"&gt;Patient Information&lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-3 col-md-3 col-sm-3"&gt;
                  &lt;div class="ui-input-group"&gt;
                      &lt;ng-select #reportInstitute [items]="selectInst" id="reportingInstitute"
                                 [virtualScroll]="true" placeholder="Select" bindLabel="label" bindValue="value"
                                 [(ngModel)]="instid" formControlName="patientInstId" required&gt; 
                      &lt;ng-template ng-option-tmp let-item="item" let-index="index"&gt;{{item.label}}&lt;/ng-template&gt;
                      &lt;/ng-select&gt;
                      &lt;span class="input-bar"&gt;&lt;/span&gt;
                      &lt;label&gt;Institution&lt;span class="mdtr"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;span *ngIf="patientForm.controls['patientInstId'].hasError('required') &amp;&amp; (isError || patientForm.controls['patientInstId'].touched)" class="tooltiptext"&gt;{{'Institution is required'}}&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here using reactive forms for validation &amp; for other wise  use template driven, to get &amp; set values.</p>
  
  <p>while loading the page, an error in console.</p>
  
  <pre><code>RROR Error: 
        ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
        formGroup's partner directive "formControlName" instead.  Example:
  
  
      &lt;div [formGroup]="myGroup"&gt;
        &lt;input formControlName="firstName"&gt;
      &lt;/div&gt;
  
      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:
  
  
      &lt;div [formGroup]="myGroup"&gt;
         &lt;input formControlName="firstName"&gt;
         &lt;input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What would be the reason for this error ? what is the solution ?
   Thanks in advance.</p>