Angular routerLink时如何不绕过必填字段

routerLink执行并绕过我的提交必填字段

      <label for="Användarnamn">Användarnamn och lösenord</label>
      <input type="text" id="Användarnamn" name="Användarnamn" placeholder="Skriv in ditt användarnamn." required>
      <input type="text" id="Lösenord" name="Lösenord" placeholder="Skriv in ditt lösenord." required>
      <input type="submit" routerLink="WAPPEASY">
    </form>

---

不使用routerLink，您可以使用click事件并进行检查，以确保在发送之前有应答

HTML:

<form>
  <label for="Användarnamn">Användarnamn och lösenord</label>
  <input type="text" id="Användarnamn" name="Användarnamn" placeholder="Skriv in ditt användarnamn." required>
  <input type="text" id="Lösenord" name="Lösenord" placeholder="Skriv in ditt lösenord." required>
  <input type="submit" (click)="onSubmit()">
</form>

TS:

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
... WhatEver else in the component

onSubmit(){
   if ((
    <HTMLInputElement>document.getElementById('Användarnamn')).validity.valid 
    && (<HTMLInputElement>document.getElementById('Lösenord')).validity.valid ) 
    {
        this.router.navigateByUrl('WAPPEASY');
    } 
}