I've been working on creating a form that allows users to input required details, which will trigger a server call and save the information. However, no matter what I try, I keep encountering the following error:
ORIGINAL EXCEPTION: TypeError: this.postService is undefined/// <reference path="../typings/tsd.d.ts" />
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ControlGroup, Control, Validators, FormBuilder} from
'angular2/common';
import {PostService} from './post.service'
@Component({
selector: 'my-app',
template:`
<form [ngFormModel]="form" (ngSubmit)="signup()">
<div class="form-group has-error has-feedback"> <div class="input-group">
<input type="text" id="email_id" type="text"
ngControl = "email_id" #email_id="ngForm" value = email_id >
</div> </div>
<div class="form-group has-error has-feedback"> <div class="input-group">
<input type="password" id="password" type="text"
ngControl = "password" #password="ngForm" value = password>
</div> </div>
<button class="btn btn-primary" type="submit">Sign Up</button>
</form>
`,
providers:[PostService, HTTP_PROVIDERS]
})
export class AppComponent {
form: ControlGroup;
postService:PostService;
constructor(fb: FormBuilder){
this.form = fb.group({
email_id: ['',Validators.required],
password: ['',Validators.required]
});
}
signup(){
this.postService.createPost({ email: this.form.value.email_id,
password: this.form.value.password });
}
}
I previously attempted 'postService:PostService
in the constructor but still encountered the same issue ofThe code in post.service.ts looks like this:
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Injectable} from 'angular2/core'
import {Post} from './post';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class PostService {
//dependency injection
private _url = "http:127.0.0.1/accounts/login_user/";
constructor(private _http:Http) {
}
createPost(post:Post){
return this._http.post(this._url,JSON.stringify(post))
.map(res=>res.json());
}
}
Can anyone help me figure out how to resolve this issue and successfully send form data to the server while displaying the response? Your assistance would be greatly appreciated.
Thank you.