Question

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>

Answer 1

除了使用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');
    } 
}

StackBlitz URL to this in action

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

1 个答案: