Formulaire Erreur angulaire 4

Question

Je suis un débutant à angulaire 4. Je suis coincé dans une situation ici. Je reçois une erreur comme donnée ci-dessous.

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) 

Le code que je suivais ici est

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> 

dans le fichier Tapuscrit que je fais ce Importé

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

fait, je ne des formes similaires dans les composants précédents et ça fonctionnait bien J'ai enlevé ngmodel, ngmodelChange et montrait toujours la même erreur.

Essayé option autonome comme indiqué dans l'erreur, mais toujours montré la même erreur.

Ai-je manqué quelque chose ici? S'il vous plaît, aidez, Merci

Answer 1

Ajoutez le paramètre {standalone: true} aux [ngModelOptions] de votre sélection.

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