I have a small angular app I have made that works fine on my computer, but does not work properly on any mobile device. The problem is the form submit button. The button will not submit form and hitting the return key on my ipad on the last form field directs back to the card number form field and says "Match the requested format" ... I am using Stripe by the way.
I have tried ngSubmit on the form and changed the button around to input type and type button and etc. I have also got rid of ngSubmit and used (click)="buy()" which also works on a desktop, but not on a mobile device. I have even added (tap) from hammerjs just in case it was a touch issue. I tried using a label outside of the form linked to the submit button. None of which work. I added an alert to just see if the button was even being clicked, and it is, the mobile device will show the alert, but wont submit the form. So, please ignore the the code at the bottom where I have multiple buttons a labels, it was for testing purposes (it all works on desktop though as is, just not on any mobile device).
Here are two pics of the problem:
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 function
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 ');
}
});
}
