即使在 angular 字段中提交有效值后，提交按钮仍处于禁用状态

Question

我正在尝试使用 angular 的 Validators.email 启用基于电子邮件验证的登录按钮。但是，即使在输入所有必填字段后，该按钮也未启用。我也尝试使用 validators.minlength 但我也面临着同样的挑战。预先感谢您的帮助。

import { Component, OnInit } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  myForm!: FormGroup;
  constructor(private fb: FormBuilder) { 
    this.submitForm();
  }

  ngOnInit(): void {
  }
  
  submitForm() {
    this.myForm = this.fb.group({
       name: ['', Validators.required, Validators.email ],
       password: ['', Validators.required]
    });
  }

  get name(){
    return this.myForm.get('name');
  }

}

<div fxLayoutAlign="center center" fxFlexFill class="main-div">
<mat-card fxFlex="25">
    <mat-toolbar color="primary">LogIn Page</mat-toolbar>
    <form fxLayoutAlign="stretch" fxLayout="column" class="login-form" [formGroup]="myForm">
        <mat-form-field>
          <mat-label>User Name</mat-label>
          <input FormControlName="name" matInput placeholder="name">
        </mat-form-field>
      
        <mat-form-field>
          <mat-label>Password</mat-label>
          <input matInput FormControlName="password" placeholder="password" type="password">   
        </mat-form-field>
        <button mat-raised-button type="submit" [disabled]="!myForm.valid"  routerLink="/mainPage">LogIn</button>
      </form>
</mat-card>
</div>

Answer 1

代码中的几个小问题。

首先，在.ts组件中，多个验证器应该分组为一个数组[]。 form control 的第二个参数用于同步验证器，而第三个参数用于异步验证器。因此，如果你不按 [] 对它们进行分组，你就是在告诉你的 formControl Validators.email 是一个 async 验证器 （它不是） 因为用逗号分隔 ,.

参考：

所以你的 submitForm() 函数应该是这样的：

  submitForm() {
    this.myForm = this.fb.group({
       name: ['', [Validators.required, Validators.email] ],
       password: ['', Validators.required]
    });
  }

其次在HTML 组件中，一个小错字导致表单控件未正确绑定。 Form Group中的Form Controls写成formControlName而不是FormControlName，所以你的HTML应该是这样的：

 <form fxLayoutAlign="stretch" fxLayout="column" class="login-form" [formGroup]="myForm">
    <mat-form-field>
       <mat-label>User Name</mat-label>
       <input formControlName="name" matInput placeholder="name">
    </mat-form-field>
      
    <mat-form-field>
      <mat-label>Password</mat-label>
      <input matInput formControlName="password" placeholder="password" type="password">   
    </mat-form-field>
    <button mat-raised-button type="submit" [disabled]="!myForm.valid"  routerLink="/mainPage">
    LogIn</button>
 </form>

即使在 angular 字段中提交有效值后，提交按钮仍处于禁用状态

Even after submitting valid values in angular fields submit button remains disabled

angular

angular-reactive-forms