我正在尝试使用Angular2将表单数据发布到我的数据库,但只将空值插入到我的数据库中。我是角色新手可以有人在我的代码中找到错误
我的模板,
<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>
我的组件
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;
}
我需要在json stringify中保留什么? 这里我想要验证,所以我把一个类似的构造函数我需要http,我需要另一个构造函数吗?如果是的话我应该把它放在哪里,因为我不能把两个构造函数放在一个组件中。