Ошибка формы угловая 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 файл Я делаю это Imported

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} параметр [ngModelOptions] на ваш выбор.

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