Validation 如何在ionic 4.8中设置登录验证

我想在我的登录验证，例如，如果我插入了错误的密码或用户名，它会弹出“错误的密码或用户名”。我应该在哪里将验证部分插入代码

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


}

---

在角度上，可以使用反应形式。为此，请记住在App.Module.ts和login.Module.ts中导入ReactiveFroms模块
在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>

如果我使用formsmodule和ngform，如何进行验证？是否与您上面的回复相同？如果我使用formsmodule和ngform，如何进行验证？这和你上面的回答一样吗？