Как установить проверку логина в ионной 4 угловой 8

Question

Мне нужна проверка в моем логине, например, если я введу неправильный пароль или неправильное имя пользователя, появится сообщение «неверный пароль или имя пользователя». и где я должен вставить часть проверки в коды.

login.page.ts

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { ModalController, NavController } from '@ionic/angular';
import { AuthService } from '../../services/auth.service';
import { NgForm, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { AlertService } from 'src/app/services/alert.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(private menuCtrl: MenuController,
    private modalController: ModalController,
    private auth: AuthService,
    private router: Router,
    private navCtrl: NavController,
    private alertService: AlertService
  ) {
    this.menuCtrl.enable(false);
  }

  ngOnInit() {
  }

  dismissLogin(){
  this.modalController.dismiss();
  }

    submit(form: NgForm) {
    this.auth.login(form.value).subscribe(
      data => {
        this.alertService.presentToast("Logged In");
      },
      error => {
        console.log(error);
      },
      () => {
        this.dismissLogin();
        this.navCtrl.navigateRoot('/home');
      }
    );
  }


}

Answer 1

В угловых вы можете использовать Reactive Forms. Для этого не забудьте импортировать модуль ReactiveFroms в App.module.ts и в login.module.ts
В login.ts

 import { Component, OnInit } from '@angular/core';
    import { MenuController } from '@ionic/angular';
    import { ModalController, NavController } from '@ionic/angular';
    import { AuthService } from '../../services/auth.service';
    import { NgForm, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
    import { Router } from '@angular/router';
    import { AlertService } from 'src/app/services/alert.service';

    @Component({
      selector: 'app-login',
      templateUrl: './login.page.html',
      styleUrls: ['./login.page.scss'],
    })
    export class LoginPage implements OnInit {
    loginForm: FormGroup;
      constructor(private menuCtrl: MenuController,
        private modalController: ModalController,
        private auth: AuthService,
        private router: Router,
        private formBuilder: FormBuilder, 
        private navCtrl: NavController,
        private alertService: AlertService
      ) {
        this.menuCtrl.enable(false);
      this.loginForm = this.formBuilder.group({
          username: ['',Validators.required],
          password: ['', Validators.required],

        });
      }

      ngOnInit() {
      }

      dismissLogin(){
      this.modalController.dismiss();
      }

        submit() {
       if(this.loginForm .valid) 
       {
            this.alertService.presentToast("Logged In");
          } else {
     this.alertService.presentToast("Please EnterUsername and Password");

    }


    }
    }

В login.html

      <form [formGroup]="loginForm">
              <ion-item>
                    <ion-input formControlName="username" type="text" ></ion-input>
             </ion-item>
             <ion-item>
                      <ion-input formControlName="password" type="password" ></ion-input>
            </ion-item>
             <div>
 <button ion-button class="login_btn" (click)="submit()" [disabled]="loginForm.invalid"> 
         </button>
          </div>