Question

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

import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import internal.GlobalVariable as GlobalVariable
...
CustomKeywords.'com.katalon.plugin.keyword.angularjs.DropdownKeywords.selectOptionByName'(findTestObject('Fruit/dropdown_selectfruit'),'Apple')

这是子组件

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

//子html

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

    })
  }
}

这里使用反应形式进行验证，或者使用模板驱动，以获取并设置值。

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

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

此错误的原因是什么？解决办法是什么？预先感谢。

Answer 1

请勿将[（ngModel）]与formcontrol一起使用不是最佳做法。

或者：-

您可以尝试[ngModelOptions] =“ {standalone：true}”

这将表示该表单为独立表单，但请避免这样做。

Answer 2

同时使用控件名称和NgModel形式（这是最佳做法）

不，这不是一个好习惯。

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

如果仍然要同时使用两者（如错误本身所述），请使用ngModelOptions

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

Answer 3

要使用ngModel，必须使用模板驱动的表单，应将FormsModule导入到ngModule中。在这里，您使用的是ReactiveFormsModule，应该使用FormGroup来创建formControls。

您无需在此输入formControlName。相反，您只给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 4

由于某种原因，我们必须混合使用ngModel和formControlName。我们将ngModel用于数据，将formControl用于验证。

但这不是一个好方法。

我建议您从“反应式和模板驱动”表单中选择一个并用于整个应用程序。

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

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

4 个答案: