SP de Wit SP de Wit - 1 year ago 114
Javascript Question

Sending form input to a method in Angular 2

I've made the following Angular 2 application witch makes use of the numbers API. I would like the user to input a day of the month and a month of the year and when they click the button that data should be sent to the getDayEvent() method which then initiates the service(which works using dummy data). I just need to find a way to send the form data to the method. I've done some research on formcontrols and formgroups but I'm struggling to implement it in my application.

selector: 'http-test',
<form id="myForm" >
<td><label>Enter a month</label></td>
<td><input type="text" ></td>
<td><label>Enter a day</label></td>
<td><input type="text"></td>
<td><button type="submit">See what happened on this day</button>
<p id="output">{{event}}</p>
providers: [HttpService],

export class HttpComponent {
event: string;

constructor(private _httpService: HttpService){


getDayEvent(month:string, day:string){
this._httpService.getEvent(month, day)
data => this.event = JSON.stringify(data),
error => alert(error),
() => console.log("Finished")

And here is my service

export class HttpService{
constructor(private _http: Http){}

getEvent(month: string, day: string){
=> res.text());

Answer Source

You could use ngModel in your inputs and click event in your button.

template inputs and button:

<input [(ngModel)]="month" type="text">
<input [(ngModel)]="day" type="text">
<button type="submit" (click)="getDayEvent(month,day)">See what happened on this day</button>

add the member variables to your class:

export class HttpComponent {
event: string;
month: string;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download