web-dev-qa-db-fra.com

Impossible de se lier à 'ngValue' car ce n'est pas une propriété connue de 'option'

J'essaie d'implémenter select dans Angular 5 mais j'obtiens constamment ce

enter image description here

J'ai déjà essayé de nombreuses questions sur StackOverflow, la seule différence est que mes composants se trouvent dans un autre module de l'application qui est finalement injecté dans le module principal. J'ai également essayé d'injecter le FormsModule à l'intérieur du module interne. J'ai essayé d'importer ReactiveFormsModule mais cela n'a pas fonctionné.

J'ai ajouté FormsModule à des importations comme celle-ci

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    ...CombineComponents
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ]
});

et voici mon balisage de composant

<label for="ctn" class="d-inline-block pl-1 semi-bold">Current active number</label>
  <select
    #selectElem
    class="custom-select"
    id="ctn"
    (change)="onCTNChange(selectElem.value)"
    formControlName="state"
  >
    <option value="" disabled>Choose a state</option>
    <option *ngFor="let ctn of availableCTN" [ngValue]="ctn.value">
      {{ctn.text}}
    </option>
  </select>
angularangular-forms
13
Usman Tahir

Utilisez value:

[value]="ctn.value"
21
FRECIA

Je faisais une erreur très stupide et suis entré dans cette question.

  1. Au lieu d'utiliser [ngValue]="ctn.value"
  2. Je devais utiliser [value] J'importais formsModule dans le module parent, j'aurais dû l'importer dans le module enfant pour faire fonctionner [(ngModel)]
  3. [value] Devrait être [(value)] si nous voulons que la sélection par défaut apparaisse.

donc mon code de composant final est.

<label for="ctn" class="d-inline-block pl-1 semi-bold">Current active number</label>
  <select
    #selectCTN
    class="custom-select"
    id="ctn"
    [(ngModel)]="selectedCTN"
    (change)="onCTNChange(selectCTN.value)"
  >
    <option value="" disabled>Choose a state</option>
    <option *ngFor="let ctn of availableCTN" [(value)]="ctn.value">
      {{ctn.text}}
    </option>
  </select>
0
Usman Tahir