フォームエラー4角度

Question

私は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) 

私はここに、以下の午前のコードは、私がこの 輸入

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){ 
    } 
} 

は、実際に私は、以前のコンポーネントに似たフォームをやったやって活字体ファイルに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> 

ですそれは正常に動作していた ngmodel、ngmodelChangeを削除しても、同じエラーが表示されました。

エラーで指定されたスタンドアロンオプションも試しましたが、同じエラーが表示されました。

ここに何か不足しています。助けてください、ありがとう

Answer 1

あなたの選択の[ngModelOptions]に{standalone: true}パラメータを追加してください。

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