表格错误 angular 4

Question

我是angular 4的新手。我在这里遇到了一个问题。我收到如下所示的错误。

html:26 ERROR 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>


    at Function.webpackJsonp.../../../forms/@angular/forms.es5.js.TemplateDrivenErrors.modelParentException (forms.es5.js:4103)
    at NgModel.webpackJsonp.../../../forms/@angular/forms.es5.js.NgModel._checkParentType (forms.es5.js:4423)
    at NgModel.webpackJsonp.../../../forms/@angular/forms.es5.js.NgModel._checkForErrors (forms.es5.js:4410)
    at NgModel.webpackJsonp.../../../forms/@angular/forms.es5.js.NgModel.ngOnChanges (forms.es5.js:4317)
    at checkAndUpdateDirectiveInline (core.es5.js:10845)
    at checkAndUpdateNodeInline (core.es5.js:12349)
    at checkAndUpdateNode (core.es5.js:12288)
    at debugCheckAndUpdateNode (core.es5.js:13149)
    at debugCheckDirectivesFn (core.es5.js:13090)

我在这里遵循的代码是

HTML

    <form class="form-horizontal" [formGroup]="addCargoForm" (ngSubmit)="registerUser(addCargoForm)" novalidate>
          <div class="form-group col-md-4 col-sm-5 add-cargo-selector">
            <label>Select Departure Country</label>
            <select 
              class="form-control"
              [(ngModel)]="selectedCountry" 
              (ngModelChange)="setCountry(selectedCountry)"
              formControlName = "addCargoCountry">
              <option value="" disabled selected>Select Country</option>
              <option value="OMN">Oman</option>
              <option value="QTR">Qatar</option>
              <option value="AUH">Abhudhabi</option>
              <option value="SJH">Sharjah</option>
              <option value="SDI">Saudi</option>
              <option value="DXB">Dubai</option>
            </select>
            <control-messages [control]="addCargoForm.controls.addCargoCountry"></control-messages>
          </div>
</form>

IN Typescript 文件我正在这样做进口

import { Component } from '@angular/core';
import { NgbdModalBasic }  from './modal-basic';
import { CommonModule }  from '@angular/common';
import { FormsModule, FormBuilder, Validators } from '@angular/forms';

 export class addYourCargo {
    public addCargoForm = this.addCargoFB.group({
    addCargoCountry: [""]
  })

  constructor(
    public addCargoFB: FormBuilder){
  }
 }

实际上我在早期的组件中做了类似的表格并且工作正常我删除了 ngmodel、ngmodelChange，但仍然显示相同的错误。

也尝试了错误中给出的独立选项，但仍然显示相同的错误。

我是不是漏掉了什么。请帮忙，谢谢

Answer 1

将 {standalone: true} 参数添加到 select 上的 [ngModelOptions]。

        <select 
          class="form-control"
          [(ngModel)]="selectedCountry" 
          (ngModelChange)="setCountry(selectedCountry)"
          [ngModelOptions]="{standalone: true}"
          formControlName = "addCargoCountry">
          <option value="" disabled selected>Select Country</option>
          ...
        </select>

表格错误 angular 4

Form Error angular 4

angular2-forms

angular2-template

angular

angular4-forms