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

我制作了一个小的angular应用程序，它在我的电脑上运行良好，但在任何移动设备上都不能正常工作。问题是表单提交按钮。该按钮将不会提交表单，点击我的ipad上最后一个表单字段上的返回键将返回到卡号表单字段，并显示“匹配请求的格式”。。。顺便说一下，我用的是条纹

我在表单上尝试了ngSubmit，并将按钮改为输入类型和类型按钮等。我还摆脱了ngSubmit，使用了（单击）=“buy（）”，它也可以在桌面上使用，但不能在移动设备上使用。我甚至在hammerjs中添加了（点击），以防触碰问题。我尝试在表单外部使用一个标签链接到submit按钮。这些都不管用。我添加了一个警报来查看按钮是否被点击，事实上，移动设备会显示警报，但不会提交表单。因此，请忽略底部的代码，我有多个按钮和标签，这是出于测试目的（它可以在桌面上正常工作，只是不能在任何移动设备上工作）

以下是问题的两张图片：

)

---

哇，我觉得自己像个白痴。天哪，开枪打我，哈哈。因此，this.http.post（“”）必须是this.http.post（/payme），并且还需要在数据服务中进行更改，去掉localhost:3000部分，只留下/add customer。哇，真不敢相信我竟然没看到！哇！但即使在部署到Heroku时，它仍能在我的计算机上工作。我猜是因为它在我的电脑上？

买应该有用。如果buy（）函数被调用，您可以测试“alert（1）”或其他东西吗？另外，由于它位于表单中，请将type改为type=“submit”而不是“button”。Buy现在是我的按钮。我还试着去掉（点击）=“buy（）”，把它放进你在桌面和ipad上使用的浏览器的名称和版本是什么？76.0.3809.100（官方版本）（64位）chrome在桌面上，76.0.03809.81 chrome在ipad上，Safari在ipad上，我不确定。我编辑了我的原始帖子，加入了buy功能，如果这有什么不同的话

<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 ');
            }
        });
}