형태 오류 각도 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>