将表单输入传递给api url angular

时间:2018-03-02 12:34:19

标签: angular forms

我试图将数据从输入字段传递到api url,但似乎我没有正确地执行它。它将输入传递给api减去表单输入。如何正确地将输入传递给api?这是我的代码:

成分:

export class AppComponent {
 constructor(private http: Http) { }
age = ''
phone = ''
sex = ''
number = ''
amount = ''
email = ''
names = ''
  sendDetails(){
    this.http.get('http://example.api.com/step1.php?'+'age=this.age&phone=this.phone&sex=this.sex&number=this.number&amount=this.amount&email=this.email&names=this.names')
    .subscribe(value => {
      const submit = value
      console.log(submit);

    })

  }
}

HTML

<input type="text" [(ngModel)]=age >
<input type="text" [(ngModel)]=phone >
<input type="text" [(ngModel)]=sex >
<input type="text" [(ngModel)]=number >
<input type="text" [(ngModel)]=amount >
<input type="text" [(ngModel)]=email >
<input type="text" [(ngModel)]=names >
<button (click)=sendDetails()> submit</button>

2 个答案:

答案 0 :(得分:0)

交换:

'http://example.api.com/step1.php?'+'age=this.age&phone=this.phone&sex=this.sex&number=this.number&amount=this.amount&email=this.email&names=this.names'

有关:

`http://example.api.com/step1.php?age=${this.age}&phone=${this.phone}&sex=${this.sex}&number=${this.number}&amount={this.amount}&email=${this.email}&names=${this.names}`

这是TypeScript的字符串插值,当您需要连接值时,它非常干净且易于使用。

答案 1 :(得分:0)

您正在传递字符串'this.name'等... 如果你的API没问题那么你需要写+this.yourParameter+ IE:

this.http.get('http://example.api.com/step1.php?age='+this.age+'&phone='+this.phone+'&sex='+this.sex+'&number='+this.number+'&amount='+this.amount+'&email='+this.email+'&names='+this.names)