Angular登录表单submit按钮与required属性失效问题求助

正在为朋友开发小型网站的管理员登录页面，技术栈为Html、Css、Angular、TypeScript，搭配Bootstrap和swiper库。但表单的required验证属性和submit按钮无法正常工作，无法定位原因，以下是相关代码：

TypeScript代码 #

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthappService } from '../services/authapp.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  public postaE: string = "";
  public pwd: string = "";

  public nonAutenticato: boolean = false;
  public errMsg: string = "Spiacenti, posta elettronica o parola d'ordine errati."

  constructor(private route: Router, private authAdminTemp: AuthappService) { }

  ngOnInit(): void {
  }

   loginAdmin = () : void => {
    console.log(this.postaE);
    console.log(this.pwd);

    if(this.authAdminTemp.autenticazioneTemp(this.postaE, this.pwd)) {
      this.route.navigate(['admin', this.postaE]);
      this.nonAutenticato = true;
    } else {
      this.nonAutenticato = false;
    }
  } 
}

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

main {
    display: grid;
    height: 100vh;
    width: 100%;
    place-items: center;
    background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
}

::selection {
    background: #ff80bf;

}

.container {
    background: #fff;
    max-width: 350px;
    width: 100%;
    padding: 25px 30px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}

.container form .title {
    font-size: 30px;
    font-weight: 600;
    margin: 20px 0 10px 0;
    position: relative;
}

.container form .title:before {
    content: '';
    position: absolute;
    height: 4px;
    width: 33px;
    left: 0px;
    bottom: 3px;
    border-radius: 5px;
    background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
}

.container form .input-box {
    width: 100%;
    height: 45px;
    margin-top: 25px;
    position: relative;
}

.container form .input-box input {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 16px;
    border: none;
}

.container form .underline::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ccc;
    left: 0;
    bottom: 0;
}

.container form .underline::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.3s ease;
}

.container form .input-box input:focus~.underline::after,
.container form .input-box input:valid~.underline::after {
    transform: scaleX(1);
    transform-origin: left;
}

.container form .button {
    margin: 40px 0 20px 0;
}

.container .input-box input[type="submit"] {
    background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
    font-size: 17px;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.container .input-box input[type="submit"]:hover {
    letter-spacing: 1px;
    background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}

.ForgetPwd {
    color: black;
    text-decoration: none;
}

.ForgetPwd:hover {
    letter-spacing: 1px;
}

HTML代码 #

<main>
  <div class="container">
      <form action="" method="POST"> <!-- Imposto il metodo di trasferimento e l'azione svolta -->
          <div class="title">Accesso amministratore - Bentornato</div>
          <div class="input-box underline">
              <input type="text" name="username" [(ngModel)]="postaE" placeholder="Posta elettronica..." required>
              <div class="underline"></div>
          </div>
          <div class="input-box">
              <input type="password" name="password" [(ngModel)]="pwd" placeholder="Chiave di accesso..." required>
              <div class="underline"></div>
          </div>
          <div class="form-group">
              <a href="#" class="ForgetPwd">Parola chiave dimenticata?</a>
          </div>
          <div class="input-box button">
              <input type="submit" name="accedi" (click)="loginAdmin()" value="Continua">
          </div>
      </form>
  </div>
  <div class="alert alert-danger" role="alert" *ngIf='nonAutenticato'>
    {{errMsg}}
  </div>
</main>

问题原因及解决方法 #

1. 表单事件绑定错误，绕过原生验证 #

当前用(click)绑定submit按钮的点击事件，会直接触发loginAdmin方法，跳过浏览器原生的required校验。需要改用Angular的表单提交事件(ngSubmit)，并结合模板驱动表单的NgForm来触发验证：

• 修改form标签：添加#loginForm="ngForm"和(ngSubmit)="loginAdmin()"，移除action="" method="POST"（Angular单页应用不需要原生表单提交）
• 修改submit按钮：移除(click)绑定，保留type="submit"

修改后的form部分：

<form #loginForm="ngForm" (ngSubmit)="loginAdmin()">
  <!-- 表单内容不变 -->
  <div class="input-box button">
      <input type="submit" name="accedi" value="Continua">
  </div>
</form>

2. 未导入FormsModule，导致ngModel和NgForm失效 #

在你的组件所属的模块（比如AppModule）中，需要导入FormsModule，否则模板驱动表单的指令无法生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 添加到imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. HTML中引入了错误的AngularJS脚本 #

你的HTML里引入了<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>，这是AngularJS（1.x版本）的脚本，而你用的是Angular（2+），两者不兼容，直接删除这行代码即可。

4. 登录逻辑中的状态赋值错误 #

loginAdmin方法里的nonAutenticato赋值逻辑反了：验证通过时应该隐藏错误提示（设为false），验证失败时显示（设为true），修正后：

loginAdmin = () : void => {
  console.log(this.postaE);
  console.log(this.pwd);

  if(this.authAdminTemp.autenticazioneTemp(this.postaE, this.pwd)) {
    this.route.navigate(['admin', this.postaE]);
    this.nonAutenticato = false; // 验证通过，隐藏错误
  } else {
    this.nonAutenticato = true; // 验证失败，显示错误
  }
} 

内容的提问来源于stack exchange，提问作者Denis