Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading