我正在学习angular2.I我已经学会了所有多个组件,但是 我在学习服务方面遇到困难。建议我可以更具体地学习的教程。 这是我的问题 我想使用http服务发布表单数据。 这是我的表格html
<form id="commentform" class="comment-form" novalidate
[ngFormModel] = "contact" (ngSubmit)="submit(contact.value)">
<div class="form-input">
<input type="text" id="author" name="author" placeholder="Name " value=""
[ngFormControl] = "contact.controls['author']" pattern="[a-zA-Z ]*"/>
<div [hidden]="contact.controls['author'].valid" style="color:#A9A9A9 ">Name is required</div>
</div>
<div class="form-input">
<input name="email" type="text" id="email" placeholder="Email " value=""
[ngFormControl] = "contact.controls['email']" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required/>
<div [hidden]="contact.controls['email'].valid" style="color:#A9A9A9 ">Email is required</div>
</div>
<div class="form-input">
<input name="phone" type="text" id="url" placeholder="Contact No. " value=""
[ngFormControl] = "contact.controls['url']" />
<div [hidden]="contact.controls['url'].valid" style="color:#A9A9A9 ">Contact is required</div>
</div>
<div class="form-input">
<textarea name="message" placeholder="Your Message Here" id="comment" aria-required="true" rows="8"
[ngFormControl] = "contact.controls['comment']" ></textarea>
<div [hidden]="contact.controls['comment'].valid" style="color:#A9A9A9 ">Message is required</div>
</div>
<p class="form-submit">
<input name="submit" type="submit" id="submit" class="submit " value="Submit" [disabled]="!contact .valid" (click)="spinner()" />
</p>
</form>
这是我的contact.component.ts
@Component({
selector: 'my-contact',
templateUrl : 'app/contact.html',
styleUrls : ['app/ts/contact/cssValid.css'],
providers : [OnChange,OnSubmit]
})
export class ContactComponent {
contact : ControlGroup;
constructor(private _OnChange:OnChange,private _formBuilder : FormBuilder,private _OnSubmit : OnSubmit ){
this.ngAfterViewInit();
}
ngOnInit() : any{
this.contact = this._formBuilder.group({
'author' : ['',Validators.required],
'email' : ['',Validators.required],
'url' : ['',Validators.compose([Validators.required, Validators.minLength(10)])],
'comment' : ['',Validators.required]
});
}
get getdata():string {
return JSON.stringify(this.contact.value);
}
submit(){
console.log(JSON.stringify(this.contact.value));
}
ngAfterViewInit( ) {
this._OnChange.changeImg();
this._OnSubmit.submitLoad();
}
}
我如何使用服务发布表单数据。 表单数据位于变量联系人中 谢谢!!!