Условия "if" и "else if" выполняются в функции фильтра (Angular -8, JavaScript)

Question

Условия «if» и «else if» выполняются в функции фильтра. когда я пытался выполнить приведенную ниже программу, я получаю вывод как

 this.users.filter((hero)=> {
     if(hero.name === this.profileForm.value.name && hero.password === this.profileForm.value.password){
      this.router.navigate(['/dashboard']);
      console.log("in if")
     }else if(hero.name !== this.profileForm.value.name){
      console.log("in else if")
     this.isValid=false;
     }

Может ли кто-нибудь помочь мне, в чем проблема с кодом.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl,Validators } from '@angular/forms';
import {
  CanActivate, Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
}                           from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {


  constructor(private router:Router) { }


  ngOnInit() {
  }
isValid:boolean=true;
  users =[{
    name:"user1",
    password:"password1"
  },
{
  name:"user2",
  password:"password2"
}
]

  profileForm = new FormGroup({
    name: new FormControl('',Validators.required),
    password: new FormControl('',[Validators.minLength(6),Validators.required]),
  });
  
onSubmit(){
  
  this.users.filter((hero)=> {
     if(hero.name === this.profileForm.value.name && hero.password === this.profileForm.value.password){
      this.router.navigate(['/dashboard']);
      console.log("in if")
     }else if(hero.name !== this.profileForm.value.name){
      console.log("in else if")
     this.isValid=false;
     }
    
  }); 
 
  
}

}

<div class="container">
    <div class="login-page">
        <h2 >Welcome to Timesheet Tracker</h2>
        <div class="form">
          
          <form class="login-form" [formGroup]="profileForm" (ngSubmit)="onSubmit()">
      
            <input type="text" placeholder="username"  formControlName="name"/>
            <span *ngIf="!profileForm.get('name').valid && profileForm.get('name').touched" class="help-block">Please enter user name..!</span>
            <input type="password" placeholder="password" formControlName="password"/>
            <span *ngIf="!profileForm.get('password').valid && profileForm.get('password').touched" class="help-block">Please enter valid password..!</span>
            <button type="submit" >login</button>
            
          </form>
          <p class="par" *ngIf="!isValid">Please enter valid user name and password..!</p>
        </div>
       
      </div>
</div>

Answer 1

Здесь .filter не требуется. .filter повторяется для каждого значения. Для некоторых значений выполняется одно условие, для других - другое, и, следовательно, оба if и else кажутся выполненными.

Вам нужно сделать что-то вроде этого:

 let heroFound = false;

  for(let hero of this.users){
   if(hero.name === this.profileForm.value.name && hero.password === 
  this.profileForm.value.password){
       heroFound = true;
       break;

    }

  }

  if(heroFound){
   this.router.navigate(['/dashboard']);
  }else{
    this.isValid=false;
  }