I don't retrieve the value of an INPUT from a drop down list

Issue

From a WebService, I have to enter an INPUT, which represents a drop-down list. There are two items in this dropdown: Yes or No.

When I select for example the item YES, then I click on Confirm.

In the browser GoogleChrome > Network > Payload the variable is empty. I don't retrieve the value selected.

I don't know where is the problem because I don't have error message... :-S

in HTML

<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && submit()">
<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <label for="type" class="form-label">Type</label>
   </div>
   <div class="col-4">
      <select [(ngModel)]="type" class="form-select">
      <option value="Yes">Yes</option>
      <option value="No">No</option>
      </select>
   </div>
</div>
<div class="row row-cols-3 pt-3">
   <div class="col"></div>
   <div class="col text-start">
      <button type="submit" class="btn btn-primary" style="background-color: #239CD3;" [disabled]="formulaire.form.invalid">Confirm</button>
   </div>
</div>
</form>

in TS

private svm: string | null = null;
type: string = '';


constructor(private service: InternalTransfertWatchService,
    private activatedRoute: ActivatedRoute, private location: Location
) {}

ngOnInit(): void {
    this.svm = this.activatedRoute.snapshot.paramMap.get('svm');
    if (!this.svm) {
        this.goBack();
        return;
    }

}

submit(): void {
    console.log("Etape 1 -> Button click");

    this.service.getInternalTransfertStock(this.svm!, this.type).pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            console.log("Etape 2");
            console.log(JSON.stringify(res));
            this.goBack();
        }
    });
}

Thank you in advance for your help.

Solution

The two-way binding is not happening, cause you have not specified the "name" property on your select.

You have to do

<select [(ngModel)]="type" name="type" class="form-select">
              <option value="Yes">Yes</option>
              <option value="No">No</option>
</select>

Remember: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Answered By - Brian Ducca