button type submit not working in mobile in Angular

Question

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 "First Name Is Missing" 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.

Component.html code


                  
                  
                    
                    
                    
                        First name is required
                    
                  

                  
                    
                    
                    
                      Last name is required
                  
                  

                  
                    
                      +61
                    
                    

                    Please enter mobile like 4xx 8xx 5xx
                    
                      Mobile is required
                    
                  

                  
                    
                    
                    
                      Email is required
                  
                  

                  
                    
                    
                    
                      Postcode is required
                  
                  

                  
                    
                    
                    
                      State is required
                  
                  

                  
                    
                    
                    
                      Password is required
                    
                  

                  
                    
                      
                    
                  
                  or continue with
                  
                    
                      
                      
                    
                  

                  
                  

                  By signing up, I agree to JobTasker's Terms & Conditions, Community Guidelines & Privacy Policy.

component.td 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 "firebase/messaging";
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) => {
        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) => {
      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) => {
          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 > 0) {
              saveMethod = this.api.update(temp);
            }
            saveMethod.subscribe((resp: any) => {
              if (resp.success === false) {
                this.ts.error(resp.message);
        
                return false;
              } else {
                console.log(resp);
                if (data.value.id > 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) => {
          console.log('An error occurred while retrieving token. ', err);

        });

   
    return false;
   

    
    return false;
  }

  callLoginButton() {

    this.auth2.attachClickHandler(this.loginElement.nativeElement, {},
      (googleAuthUser: any) => {

        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) => {
        console.log(JSON.stringify(error, undefined, 2));
      });

  }

  googleAuthSDK() {

    (window)['googleSDKLoaded'] = () => {
      (window)['gapi'].load('auth2', () => {
        this.auth2 = (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 = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
      fjs?.parentNode?.insertBefore(js, fjs);
    }(document, 'script', 'google-jssdk'));

  }

  // Facebook
  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
  }

}

module.ts 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 { }

button type submit not working in mobile in Angular

0 Answers