如何在angular2中使用http服务提交后在控制台中打印表单数据

时间:2016-08-06 10:12:51

标签: html typescript angular

我正在学习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();
  }



  }

我如何使用服务发布表单数据。 表单数据位于变量联系人中  谢谢!!!

0 个答案:

没有答案