表单提交在移动设备上不起作用（匹配请求的格式）

Question

我制作了一个小型 Angular 应用程序，它在我的计算机上运行良好，但在任何移动设备上都无法正常运行。问题是表单提交按钮。该按钮不会提交表单，并且在最后一个表单字段上按我 ipad 上的返回键会直接返回卡号表单字段并显示“匹配请求的格式”......顺便说一下，我正在使用 Stripe。

我已经在表单上尝试了 ngSubmit 并将按钮更改为输入类型和类型按钮等。我也摆脱了 ngSubmit 并使用了 (click)="buy()" 这也适用于桌面，但是不在移动设备上。我什至从hammerjs添加（点击）以防万一这是一个触摸问题。我尝试使用链接到提交按钮的表单之外的标签。这些都不起作用。我添加了一个警报，以查看按钮是否被单击，并且移动设备将显示警报，但不会提交表单。所以，请忽略底部我有多个按钮和标签的代码，它是出于测试目的（尽管它在桌面上都可以正常工作，但不能在任何移动设备上使用）。

这是问题的两张图片：

https://drive.google.com/file/d/18grWfXyQN9gvcuJRuUqIoS_yjMsU1vii/view?usp=sharing) https://drive.google.com/file/d/1ezhyAtTg1Z1OomLd9pv47Bif-0ILOR5b/view?usp=sharing

<app-navbar></app-navbar>

<div class="container">
    <form class="example-form" action="#" [formGroup]="stripeTest">
        <table class="example-full-width" cellspacing="0">
            <tr>
                <td>
                    <mat-form-field class="example-full-width media-width">
                        <input matInput type="text" placeholder="Full Name"
                               formControlName="name" id="firstName">
                        <mat-error *ngIf="hasError('name', 'required')">First Name is
                            required
                        </mat-error>
                    </mat-form-field>
                </td>


        </table>
        <table class="example-full-width" cellspacing="0">
            <td>
                <mat-form-field class="example-full-width">
                    <input matInput type="text" placeholder="Phone "
                           formControlName="phone" id="phone">
                    <mat-error *ngIf="hasError('phone', 'required')">Zip is
                        required
                    </mat-error>
                </mat-form-field>
            </td>
            <td>
                <mat-form-field class="example-full-width">
                    <input matInput type="text" placeholder="Email"
                           formControlName="email" id="email">
                    <mat-error *ngIf="hasError('email', 'required')">Zip is
                        required
                    </mat-error>
                </mat-form-field>
            </td>
        </table>

        <p>
            <mat-form-field class="example-full-width addr-media-width">
          <textarea matInput type="text" placeholder="Address"
                    formControlName="address_line1" id="address"></textarea>
                <mat-error *ngIf="hasError('address_line1', 'required')">Address
                    is required
                </mat-error>
            </mat-form-field>
        </p>

        <table class="example-full-width" cellspacing="0">
            <tr>
                <td>
                    <mat-form-field class="example-full-width">
                        <input matInput type="text" placeholder="City"
                               formControlName="address_city" id="city">
                        <mat-error *ngIf="hasError('address_city', 'required')">City is
                            required
                        </mat-error>
                    </mat-form-field>
                </td>

                <td>
                    <mat-form-field class="example-full-width state-width">
                        <input matInput type="text" placeholder="State"
                               formControlName="address_state" id="state">
                        <mat-error *ngIf="hasError('address_state', 'required')">State is
                            required
                        </mat-error>
                    </mat-form-field>
                </td>

                <td>
                    <mat-form-field class="half-width">
                        <input matInput type="text" placeholder="Zip"
                               formControlName="address_zip" id="zip">
                        <mat-error *ngIf="hasError('address_zip', 'required')">Zip is
                            required
                        </mat-error>
                    </mat-form-field>
                </td>
            </tr>
        </table>


        <div class="col-lg-12">
            <div id="card-element" class="field"></div>
        </div>
        <div class="col-lg-12">

            <input type="submit" id="submit-form" [disabled]="!stripeTest.valid"
                   class="btn btn-danger" style="visibility: hidden" (click)="buy()">
            <button type="button" (tap)="buy()">Buy</button>
            <button class="btn btn-danger" (click)="cancel()">Cancel</button>

        </div>
    </form>

    <label for="submit-form" tabindex="0">Submit</label>

购买功能

buy(){
    const name = this.stripeTest.get('name').value;
    const phone = this.stripeTest.get('phone').value;
    const email = this.stripeTest.get('email').value;
    const address_state = this.stripeTest.get('address_state').value;
    const address_city = this.stripeTest.get('address_city').value;
    const address_line1 = this.stripeTest.get('address_line1').value;
    const address_zip = this.stripeTest.get('address_zip').value;

    let newCustomer: Customer = {
        name: name,
        phone: phone,
        email: email
    };

    this.dataService.addCustomer(newCustomer)
        .subscribe(() => {
            console.log('Added');
        })

    this.stripeService
        .createToken(this.card, {
            name, address_state, address_city, address_line1,
            address_zip
        })
        .subscribe(obj => {
            if (obj) {
                console.log('Token is --> ', obj.token.id);

                // tslint:disable-next-line: no-unused-expression
                this.http.post('http://localhost:3000/payme', {
                    token: obj.token.id,
                    receipt_email: email
                }).subscribe(
                    (res) => {
                        console.log('The response from server is ', res);
                        console.log('Payment Done');
                        this.router.navigateByUrl('/thank-you');
                        alert(obj.token.id + obj + Customer + name + res);
                    },
                    (err) => {
                        console.log('The error is ', err);
                        alert(err);
                    })

            } else {
                // Error creating the token
                console.log('Error comes ');
            }
        });
}

Answer 1

哦，哇，我觉得自己像个白痴。哎呀，射我哈哈。因此，this.http.post('http://localhost:3000/payme') 需要只是 this.http.post(/payme) 并且还需要在数据服务中进行更改，去掉 localhost:3000 部分，只需离开 /add-customer。哇，我不敢相信我什至没有看到！哇。但即使部署到 Heroku，它仍然可以在我的计算机上运行。我猜是因为它在我的电脑上？