Get the return of a select control

Question

User791773689 posted

Hello everybody,

On an Angular page, based on a WebAPI server, I display a list, and should like to know which element the user chooses in it.

In the component.html I have something like that :

<div>
  <div class="col-md-12" style="margin-left:30px;">
    <form id="fileForm">
        <select id="list-files" size="8">
            <option *ngFor="let file of ListFiles" value={{file}}>{{file}}</option>
        </select>
    </form>
  </div>
</div>
<div class="col-md-12">
    <div>
        <button type="button" class="btn btn-primary" (click)="onLink('" + fileForm.list-files + "')">Link</button>
    </div>
</div>

and as you guess I should like to call function onLink with the selection in the list as argument.

But I am afraid that in the page I get this error :

Unexpected closing tag "button". It may happen when the tag has already been closed by another tag.

and some longer text but I guess it would not help.

If I give

(click)="onLink('Text')"

it works, but of course with always the same argument.

Is there another way to get values of a control, from the component.ts file ?

Answer 1

User288213138 posted

Hi Gluups,

What version of angualr did you use？

Best regards,

Sam

Answer 2

User61956409 posted

Hi Gluups,

According to your description and code, it seems that you'd like to get user selected value within button click event. To achieve the requirement, you can refer to the following sample code.

<div>
  <div class="col-md-12" style="margin-left:30px;">
    <form id="fileForm" #userform = "ngForm">
        <select id="list-files" size="8" name="selectedFile" ngModel>
            <option *ngFor="let file of ListFiles" value={{file}}>{{file}}</option>
        </select>
    </form>
  </div>
</div>
<div class="col-md-12">
    <div>
        <button type="button" class="btn btn-primary" (click)="onLink(userform.value)">Link</button>
    </div>
</div>

Definition of onLink function

onLink(data) {
  console.log(data.selectedFile);
}

Test Result

Note: please make sure you import FormsModule in app.module.ts 

import { FormsModule } from '@angular/forms';

With Regards,

Fei Han

Answer 3

User791773689 posted

Hello,

I use Angular CLI 7.1.4.

Thank you for your answers. I eventually managed to get the results, although I forgot to declare FormsModule. I shall have to take a few minutes to see, perhaps the reason is obvious.

On the list control, I put

(change)="DisplayPicture(listfiles.value)"

and in the component.ts this is received by :

public DisplayPicture(argu: string): void{
   alert(argu);
   this.getImage(argu);
}

At least this displays the content of the selected element, which was the topic of the thread.

As the name of the function can lead to guess, I should like to display the corresponding picture, perhaps I shall have to open a new thread for that.

In case someone wishes to progress on this, I give you the code I already wrote :

getImage(imageUrl: string){
    alert('getImage : ' + imageUrl);
    imageUrl = "http://localhost:75922/api/upload/ReturnImage?path=" + imageUrl;
    // This adddress displays the picture converted to Base64String, included in json
    this.http.get(imageUrl).subcribe(
        s => this.s2 = this.imgParse(s.toString())
    )
}

public imgParse(src: string): string {
    alert("imgparse");
    return this.convjson(src);
}

public convjson(src: string): string {
    alert("json");
    this.str1 = json.parse(src).base64String;
    alert(this.str1);
    return this.str1;
}

The alert messages lead to know that the control is lost on the line

this.str1 = JSON.parse(src).base64String;

as the message "JSON" is displayed, but not this.str1 after that.

So, the next thread will have as title "json parse in Angular module".

I spent some time to know how to declare the Json module in a ts module, and did not find yet.

Answer 4

User61956409 posted

Hi Gluups,

I should like to display the corresponding picture, perhaps I shall have to open a new thread for that.

Yes, you can create a new thread for the new question about displaying the corresponding picture. Besides, if the original problem has been resolved and the reply is helpful, you can mark it as answer and close this thread.

With Regards,

Fei Han