title: button type submit not working in mobile in Angular
body: <p>I have a site in Angular 14. Registration button is working fine in desktop, but not working in mobile. Wierd thing is, when I press the Create Account button without filling the signup form, then the button works and gives me validation messages like &quot;First Name Is Missing&quot; and so on. But when I fill up the form fully and then press Create Account button, it do nothing in mobile. Tested on Safari and Chrome browser, on both it does nothing.</p>
  <p>Component.html code</p>
  <pre><code>&lt;form [formGroup]=&quot;fg&quot; (ngSubmit)=&quot;save(fg)&quot; #f=&quot;ngForm&quot;&gt;
                    &lt;input type=&quot;hidden&quot; formControlName=&quot;id&quot;&gt;
                    &lt;div class=&quot;form-group login-input&quot;&gt;
                      &lt;label for=&quot;Firstname&quot;&gt;&lt;i class=&quot;zmdi zmdi-account material-icons-name p-3&quot;&gt;&lt;/i&gt;&lt;/label&gt;
                      &lt;input type=&quot;text&quot; formControlName=&quot;first_name&quot; class=&quot;form-control&quot; name=&quot;first_name&quot; id=&quot;Firstname&quot; placeholder=&quot;First Name&quot; required=&quot;&quot; control-id=&quot;ControlID-2&quot;&gt;
                      &lt;div *ngIf=&quot;fh.check(g['first_name'], f)&quot; class=&quot;errors&quot;&gt;
                          &lt;p *ngIf=&quot;g['first_name'].errors&quot;&gt;First name is required&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group login-input&quot;&gt;
                      &lt;label for=&quot;Lastname&quot;&gt;&lt;i class=&quot;zmdi zmdi-account material-icons-name p-3&quot;&gt;&lt;/i&gt;&lt;/label&gt;
                      &lt;input type=&quot;text&quot; formControlName=&quot;last_name&quot; class=&quot;form-control&quot; name=&quot;lastname&quot; id=&quot;Lastname&quot; placeholder=&quot;Last Name&quot; required=&quot;&quot; control-id=&quot;ControlID-3&quot;&gt;
                      &lt;div *ngIf=&quot;fh.check(g['last_name'], f)&quot; class=&quot;errors&quot;&gt;
                        &lt;p *ngIf=&quot;g['last_name'].errors&quot;&gt;Last name is required&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group login-input&quot;&gt;
                      &lt;label for=&quot;mobilenumber &quot; class=&quot;numberfixdigite&quot;&gt;
                        +61
                      &lt;/label&gt;
                      &lt;input type=&quot;text&quot; oninput=&quot;this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');&quot; formControlName=&quot;phone_number&quot; class=&quot;form-control&quot; minlength=&quot;9&quot; maxlength=&quot;12&quot; name=&quot;phone&quot; id=&quot;mobilenumber&quot; placeholder=&quot;Phone number&quot; required=&quot;&quot; control-id=&quot;ControlID-4&quot;&gt;
  
                      &lt;span style=&quot;color:red&quot;&gt;Please enter mobile like 4xx 8xx 5xx&lt;/span&gt;
                      &lt;div *ngIf=&quot;fh.check(g['phone_number'], f)&quot; class=&quot;errors&quot;&gt;
                        &lt;p *ngIf=&quot;g['phone_number'].errors&quot;&gt;Mobile is required&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group login-input&quot;&gt;
                      &lt;label for=&quot;email&quot;&gt;&lt;i class=&quot;zmdi zmdi-email p-3&quot;&gt;&lt;/i&gt;&lt;/label&gt;
                      &lt;input type=&quot;email&quot; formControlName=&quot;email&quot; name=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;Email&quot; required=&quot;&quot; control-id=&quot;ControlID-5&quot;&gt;
                      &lt;div *ngIf=&quot;fh.check(g['email'], f)&quot; class=&quot;errors&quot;&gt;
                        &lt;p *ngIf=&quot;g['email'].errors&quot;&gt;Email is required&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group login-input&quot;&gt;
                      &lt;label for=&quot;label-183&quot;&gt;&lt;i class=&quot;zmdi zmdi-pin p-3&quot;&gt;&lt;/i&gt;&lt;/label&gt;
                      &lt;input type=&quot;text&quot; autocomplete=&quot;off&quot; formControlName=&quot;postcode&quot; spellcheck=&quot;false&quot; class=&quot; form-control TextInput__StyledInput-sc-8dpq00-1 dvowrP typeahead__input&quot; data-ui-test=&quot;location-input&quot; name=&quot;suburb&quot; placeholder=&quot;Suburb or Postcode&quot; id=&quot;label-183&quot; value=&quot;&quot; required=&quot;&quot; control-id=&quot;ControlID-6&quot;
                      matInput
                      matGoogleMapsAutocomplete
                      (onAutocompleteSelected)=&quot;onAutocompleteSelected($event)&quot;
                      (onLocationSelected)=&quot;onLocationSelected($event)&quot;
                      &gt;
                      &lt;div *ngIf=&quot;fh.check(g['postcode'], f)&quot; class=&quot;errors&quot;&gt;
                        &lt;p *ngIf=&quot;g['postcode'].errors&quot;&gt;Postcode is required&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group login-input&quot;&gt;
                      &lt;label for=&quot;state&quot;&gt;&lt;i class=&quot;zmdi zmdi-city p-3&quot;&gt;&lt;/i&gt;&lt;/label&gt;
                      &lt;input type=&quot;dropdown&quot; formControlName=&quot;state&quot; class=&quot;form-control&quot; name=&quot;state&quot; id=&quot;state&quot; placeholder=&quot;State&quot; required=&quot;&quot; control-id=&quot;ControlID-7&quot;&gt;
                      &lt;div *ngIf=&quot;fh.check(g['state'], f)&quot; class=&quot;errors&quot;&gt;
                        &lt;p *ngIf=&quot;g['state'].errors&quot;&gt;State is required&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group login-input&quot;&gt;
                      &lt;label for=&quot;pass&quot;&gt;&lt;i class=&quot;zmdi zmdi-lock p-3&quot;&gt;&lt;/i&gt;&lt;/label&gt;
                      &lt;input type=&quot;password&quot; formControlName=&quot;password&quot; class=&quot;form-control&quot; name=&quot;password&quot; id=&quot;pass&quot; placeholder=&quot;Create Password&quot; required=&quot;&quot; control-id=&quot;ControlID-8&quot;&gt;
                      &lt;div *ngIf=&quot;fh.check(g['password'], f)&quot; class=&quot;errors&quot;&gt;
                        &lt;p *ngIf=&quot;g['password'].errors&quot;&gt;Password is required&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group form-button mb-1&quot;&gt;
                      &lt;div class=&quot;form-group form-button mb-1&quot;&gt;
                        &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary btn-group-vertical buttonweb&quot; control-id=&quot;ControlID-9&quot;&gt;
                          &lt;span class=&quot;text-white&quot;&gt; Create Account&lt;/span&gt;
                        &lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;span class=&quot;social-label&quot;&gt;or continue with&lt;/span&gt;
                    &lt;div class=&quot;social-login&quot;&gt;
                      &lt;ul class=&quot;socials m-auto&quot;&gt;
                        &lt;li&gt;&lt;a (click)=&quot;signInWithFB()&quot; target=&quot;_blank&quot;&gt;&lt;i class=&quot;display-flex-center zmdi zmdi-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a  #loginRef&gt;&lt;i class=&quot;display-flex-center zmdi zmdi-google&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;d-flex&quot;&gt;
                    &lt;br&gt;
                    &lt;p class=&quot;Text__StyledTypographyComponent-sc-35e02v-0 bfXubR &quot;&gt;By signing up, I agree to JobTasker's&amp;nbsp;&lt;a href=&quot;/terms-conditions&quot; target=&quot;_blank&quot; rel=&quot;noreferrer&quot;&gt;Terms &amp;amp; Conditions&lt;/a&gt;,&amp;nbsp;&lt;a href=&quot;/guidelines/&quot; target=&quot;_blank&quot; rel=&quot;noreferrer&quot;&gt;Community Guidelines&lt;/a&gt;&amp;nbsp;&amp;amp;&amp;nbsp;&lt;a href=&quot;/privacy-policy&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Privacy Policy&lt;/a&gt;.&amp;nbsp;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;/form&gt;
  </code></pre>
  <p>component.td code</p>
  <pre><code>import { ApiService } from './../../servies/api.service';
  import { googleLogin } from './../../../environments/environment';
  import { FormHelper } from './../../shared/FormHelper';
  import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
  import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
  import { DataService } from './data.service';
  import { ToastrService } from 'ngx-toastr';
  import { ActivatedRoute, Router } from '@angular/router';
  import { getMessaging, getToken, onMessage } from &quot;firebase/messaging&quot;;
  import { environment, firebaseConfig } from 'src/environments/environment.prod';
  import {
    FacebookLoginProvider,
    GoogleLoginProvider,
    SocialAuthService,
  } from '@abacritt/angularx-social-login';
  import {Location, Appearance, GermanAddress} from '@angular-material-extensions/google-maps-autocomplete';
  import PlaceResult = google.maps.places.PlaceResult;
  
  // import {Location, Appearance, GermanAddress} from '@angular-material-extensions/google-maps-autocomplete';
  // import geocoder = google.maps.Geocoder;
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.scss'],
    providers: [DataService]
  })
  export class RegisterComponent implements OnInit {
  
    auth2: any;
  
    @ViewChild('loginRef', { static: true }) loginElement!: ElementRef;
  
    public fg: FormGroup;
    type: string;
  
    public appearance = Appearance;
    public zoom: number = 10;
    public latitude: number = 0;
    public longitude: number = 0;
    public place_id: any = '';
    public plase_url: any = '';
    mapdata = false;
  
    onAutocompleteSelected(result: PlaceResult) {
      this.mapdata = true;
      //console.log(result.url, result);
      this.place_id = result.place_id;
      this.plase_url = result.url;
    }
  
    onLocationSelected(location: Location) {
      //console.log('onLocationSelected: ', location);
      this.latitude = location.latitude;
      this.longitude = location.longitude;
    }
  
    onGermanAddressMapped($event: GermanAddress) {
      //console.log('onGermanAddressMapped', $event);
    }
  
    // Google Map Apis Function
    private setCurrentPosition() {
      if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition((position) =&gt; {
          console.log('position', position);
         
        });
      }
    }
  
    constructor(public fb: FormBuilder,
      private route: ActivatedRoute,
      public fh: FormHelper,
      private api: DataService,
      private apii: ApiService,
      public router: Router,
      private ts: ToastrService,
      private authService: SocialAuthService,) {
      this.type = String(this.route.snapshot.paramMap.get('type'));
      this.fg = this.fb.group({
        id: new FormControl(-1, []),
        email: new FormControl(null, [Validators.required, Validators.email]),
        first_name: new FormControl('', [Validators.required]),
        last_name: new FormControl(null, [Validators.required]),
        phone_number: new FormControl(null, [Validators.required, Validators.pattern('')]),
        postcode: new FormControl(null, [Validators.required]),
        state: new FormControl(null, [Validators.required]),
        //abn: new FormControl(null, [Validators.required]),
        password: new FormControl(null, [Validators.required]),
        password_confirmation: new FormControl(null, []),
        agreeterm: new FormControl(false, [Validators.required]),
        user_type: this.type
      });
    }
  
    public get g() {
      return this.fg.controls;
    }
  
    ngOnInit() {
      this.googleAuthSDK();
      this.setCurrentPosition();
    }
  
    listen() {
      const messaging = getMessaging();
      onMessage(messaging, (payload) =&gt; {
        console.log('Message received. ', payload);
      });
    }
  
    public save(data: any): boolean {
      const messaging = getMessaging();
      console.log(data.value);
      
      this.fg.patchValue({ password_confirmation: data.value.password });
      if (data.status === 'INVALID') {
        this.ts.warning('There is validation issue kindly review the form again!!');
  
        return false;
      }
  
  
  
      getToken(messaging,
        { vapidKey: firebaseConfig.vapidKey }).then(
          (currentToken) =&gt; {
            if (currentToken) {
              console.log(currentToken);
              let dataT = data.value;
              let temp = { ...dataT, fcm_token: currentToken, 
                lat : this.latitude, 
                lng : this.longitude,  
                place_id : this.place_id,
                place_url : this.plase_url
              }
  
              console.log(temp);
              
  
              let saveMethod = this.api.save(temp);
              if (data.value.id &gt; 0) {
                saveMethod = this.api.update(temp);
              }
              saveMethod.subscribe((resp: any) =&gt; {
                if (resp.success === false) {
                  this.ts.error(resp.message);
          
                  return false;
                } else {
                  console.log(resp);
                  if (data.value.id &gt; 0) {
                    // this.api.updateItem(resp.data.result, -1);
                    this.ts.success('Registered successfully!!');
                  } else {
                    data.value.id = resp.data.id;
                    // this.api.addItem(resp.data.result);
                    this.ts.success('Registered successfully!!');
                  }
          
                  this.router.navigate(['/login']);
          
                  return true;
                }
              });
          
            } else {
              console.log('No registration token available. Request permission to generate one.');
  
            }
          }).catch((err) =&gt; {
            console.log('An error occurred while retrieving token. ', err);
  
          });
  
     
      return false;
     
  
      
      return false;
    }
  
    callLoginButton() {
  
      this.auth2.attachClickHandler(this.loginElement.nativeElement, {},
        (googleAuthUser: any) =&gt; {
  
          let profile = googleAuthUser.getBasicProfile();
          //console.log('Token || ' + googleAuthUser.getAuthResponse().id_token);
          // console.log('ID: ' + profile.getId());
          // console.log('Name: ' + profile.getName());
          // console.log('Image URL: ' + profile.getImageUrl());
          // console.log('Email: ' + profile.getEmail());
          //console.log();
          
          let fullName = profile.getName().split(' ');
  
          this.fg.controls['first_name'].setValue(fullName[0]);
          this.fg.controls['last_name'].setValue(fullName[1]);
          this.fg.controls['email'].setValue(profile.getEmail());
        }, (error: any) =&gt; {
          console.log(JSON.stringify(error, undefined, 2));
        });
  
    }
  
    googleAuthSDK() {
  
      (&lt;any&gt;window)['googleSDKLoaded'] = () =&gt; {
        (&lt;any&gt;window)['gapi'].load('auth2', () =&gt; {
          this.auth2 = (&lt;any&gt;window)['gapi'].auth2.init({
            client_id: googleLogin.client_id,
            cookiepolicy: 'single_host_origin',
            plugin_name: 'Web client 1',
            scope: 'profile email'
          });
          this.callLoginButton();
        });
      }
  
      (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement('script');
        js.id = id;
        js.src = &quot;https://apis.google.com/js/platform.js?onload=googleSDKLoaded&quot;;
        fjs?.parentNode?.insertBefore(js, fjs);
      }(document, 'script', 'google-jssdk'));
  
    }
  
    // Facebook
    signInWithFB(): void {
      this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
    }
  
  }
  </code></pre>
  <p>module.ts code</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RegisterComponent } from './register.component';
  import { RouterModule } from '@angular/router';
  import { SharedModule } from '../../shared/shared.module';
  import { ReactiveFormsModule } from '@angular/forms';
  import { AgmCoreModule } from '@agm/core';
  import { GoogleMapApi } from 'src/environments/environment';
  import { MatGoogleMapsAutocompleteModule } from '@angular-material-extensions/google-maps-autocomplete';
  
  @NgModule({
    imports: [
      AgmCoreModule.forRoot({
        apiKey: GoogleMapApi.apikey,
        libraries: ['places']
      }),
      MatGoogleMapsAutocompleteModule,
      CommonModule,
      SharedModule,
      ReactiveFormsModule,
      RouterModule.forChild([
        {
          path: '',
          component: RegisterComponent
        }
      ])
    ],
    declarations: [RegisterComponent]
  })
  export class RegisterModule { }
  </code></pre>