如何使用 angular 使用户输入等于 If 条件时导航的函数

How to make a function that navigate when user input equal to the If Condition Using angular

我想创建一个函数来检查用户输入是否等于(用户名:“marwen”,密码:“hamdi”),然后导航到 URL 'apps/e-commerce/products'

这是打字稿:

ngOnInit(): void{
    this.loginForm = this._formBuilder.group({
        email   : ["", [Validators.required] ],
        password: ["", Validators.required]
    });           
}

check(){
    if (this.email.value==="marwen"&& this.password.value==="hamdi"){
        this.router.navigate(['apps/e-commerce/products'])
    } 
}

这是 HTML 部分,我希望在单击按钮时执行该功能。

<form name="loginForm" [formGroup]="loginForm" novalidate >
    <mat-form-field appearance="outline" style="color:white;">
        <mat-label style="color:white;">Nom d'Utilisateur</mat-label>
        <input matInput formControlName="email" id="email">
        <mat-icon matSuffix class="secondary-text" style="color:white;">
            supervised_user_circle
        </mat-icon>
        <mat-error *ngIf="loginForm.get('email').hasError('required')">         
            Nom d'utilisateur est requis
        </mat-error> 
    </mat-form-field>
    <mat-form-field appearance="outline">
        <mat-label style="color:white;">Mot De Passe</mat-label>
        <input matInput type="password" formControlName="password" id="password">
        <mat-icon matSuffix class="secondary-text" style="color:white;" >vpn_key</mat-icon>
        <mat-error>
            Mot De Passe est requis
        </mat-error>
    </mat-form-field>
    <button  mat-raised-button color="accent" class="submit-button" aria-label="LOG IN" [disabled]="loginForm.invalid" (click)="check()" >
        Connexion        
    </button>
</form>

我希望您仅将此验证用作测试或模拟您的登录。无论如何,这可以帮助你:

ngOnInit() {
    // do something with this subscription
    this.loginForm.valueChanges.subscribe(values => {
      if (values.email === "marwen" && values.value==="hamdi") {
        this.router.navigate(['apps/e-commerce/products'])
      }
    });
}