I am trying to post the form data to my database using Angular2 but only the null values are inserted to my database.I am new to angular can someone find the error in my code
My template,
<form (ngSubmit)="onSubmit()" [(ngFormModel)]="form" #f="ngForm">
<div class="form-row">
<div class="formHeading">Facebook</div>
<input type="text" id="fb" ngControl="facebook">
<div class="errorMessage" *ngIf="f.form.controls.fb.touched && !f.form.controls.fb.valid"> Facebook address is required</div>
</div>
<div class="form-row">
<div class="formHeading">Google</div>
<input type="text" id="gl" ngControl="google" >
<div class="errorMessage" *ngIf="f.form.controls.gl.touched && !f.form.controls.gl.valid">Google address is required</div>
</div>
<div class="form-row">
<div class="formHeading">Twitter</div>
<input type="text" id="twt" ngModel = f.twitter >
</div>
<div class="form-row">
<div class="formHeading">LinkedIn</div>
<input type="text" id="li" >
</div>
<div class="form-row">
<button type="submit" [disabled]="!f.form.valid">Save</button>
</div>
</form>
My Component
import {Component} from '@angular/core';
import {FormBuilder, Validators, ControlGroup, FORM_DIRECTIVES} from '@angular/common';
import {Http, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Subject } from 'rxjs/Subject';
@Component({
selector: 'social-form',
directives:[FORM_DIRECTIVES],
templateUrl: './components/social/social.html',
providers: [FormBuilder]
})
export class Social {
http: Http;
form;
payLoad = null;
constructor(fb: FormBuilder) {
this.form = fb.group({
"fb": ['', Validators.required],
"gl": ['',Validators.required],
});
}
constructor(http: Http) {
this.http = http;
}
onSubmit() {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post('http://localhost/a2server/index.php/profile/addsocial', JSON.stringify({?????????????}),{headers:headers})
.map((res: Response) => res.json())
.subscribe((res:Person) => this.form = res);
}
}
class Person{
facebook:string;
google:string;
twitter:string;
linkedin:string;
}
What should i need to keep in json stringify? Here i want validations,so i put a constructor similarlly i need http, am i need another constructor?If yes where should i put it since i cannot put two constructors in one component.