Can't bind to 'ngValue' since it isn't a known property of 'option'

Question

I am trying to implement select in Angular 5 but I am constantly getting this

I\'ve tried many StackOverflow questions already, The only difference

Answer 1

[value] will work in this case. In my case also, I haven't used formmodule, just using it inside a tag, working fine.

Answer 2

I was doing a very silly mistake and got into this issue.

1. Instead of using [ngValue]="ctn.value"
2. I was supposed to use [value] I was importing formsModule inside parent module, I should have imported it in child module to make [(ngModel)] work
3. [value] should be [(value)] if we want the default selection show up.

so my final component code is.

<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>

Answer 3

Use value:

[value]="ctn.value"