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

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 >
   <div >
      <label for="type" >Type</label>
   </div>
   <div >
      <select [(ngModel)]="type" >
      <option value="Yes">Yes</option>
      <option value="No">No</option>
      </select>
   </div>
</div>
<div >
   <div ></div>
   <div >
      <button type="submit"  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.

CodePudding user response：

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