如何使用ngModel将stripe.createToken（）的tokenData参数绑定到输入

Question

我正在尝试使用在前端使用带有条纹元素的令牌创建费用。 我想通过将tokenData的不同属性与ngmodel绑定到输入中来添加客户地址，然后将tokenData对象作为createToken（）方法的第二个参数传递。

//component.html

    <input type="text" [(ngModel)]="name" placeholder="name" name="name">
    <input type="text" [(ngModel)]="address_line1" placeholder="adress line 1" name="address">
    <input type="text" [(ngModel)]="address_line2" placeholder="adress line 2" name="address">
    <input type="text" [(ngModel)]="address_city" placeholder="City" name="city">
    <input type="text" [(ngModel)]="address_state" placeholder="State" name="state">
    <input type="text" [(ngModel)]="address_country" placeholder="Country" name="country">

  <button (click)="submitForm()">Submit Payment</button>

//component.ts

  public tokenData = {
    name: '',
    address_line1: '',
    address_line2: '',
    address_city: '',
    address_state: '',
    address_zip: undefined,
    address_country: ''
  };

public submitForm = () => {
    this.stripe.createToken(this.card, this.tokenData).then(res => {
      if(res.error){
        console.log(res.error.message);
      }
      else {
        this.stripeTokenHandler(res.token).subscribe();
        console.log(res.token);
      }
    });
  };
  public stripeTokenHandler(t){
    return this.http.post(`${this.apiUrl}/charge`, t);
  };

但是当我提交表单时，令牌会在tokenData参数为空的情况下登录到控制台，这意味着输入未正确绑定到tokenData。 如何才能做到这一点？

Answer 1

您没有绑定到tokenData的属性，而是将tokenData添加到您的所有绑定中，例如[（ngModel）] =“ tokenData.address_line1”

<input type="text" [(ngModel)]="tokenData.name" placeholder="name" name="name">
<input type="text" [(ngModel)]="tokenData.address_line1" placeholder="adress line 1" name="address">
<input type="text" [(ngModel)]="tokenData.address_line2" placeholder="adress line 2" name="address">
<input type="text" [(ngModel)]="tokenData.address_city" placeholder="City" name="city">
<input type="text" [(ngModel)]="tokenData.address_state" placeholder="State" name="state">
<input type="text" [(ngModel)]="tokenData.address_country" placeholder="Country" name="country">