Angular 表单按钮在验证表单后未启用答案

【问题标题】：Angular form button not enabling upon validated formAngular 表单按钮在验证表单后未启用
【发布时间】：2020-02-12 22:32:43
【问题描述】：

我在进行一些更改的同时遵循 fireship 教程，但是当我的表单验证返回 true 时，我的提交按钮似乎没有从禁用切换到启用。

这是我目前的登录信息 html

<form [formGroup]="loginForm" novalidate>
  <mat-form-field>
    <input matInput type="text" placeholder="email" #email required >
  </mat-form-field>
  <mat-form-field>
    <input matInput type="password" placeholder="Password" #password required>
  </mat-form-field>
  <div class="d-flex flex-column align-items-center">
    <!-- Calling SignIn Api from AuthService -->
      <button mat-raised-button  class="button is-success w-100" type="submit" 
        (click)="checkSignIn(email.value, password.value)">
        Continue
      </button>
  </div>
  <div *ngIf="email.invalid || password.invalid" class="notification is-danger">
    Something isn't right with the Email or Password
  </div>
</form>

在我的 ts 中

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

  // Use getters for cleaner HTML code
  get email() {
    return this.loginForm.get('email')
  }

  get password() {
    return this.loginForm.get('password')
  }
  checkSignIn(email, password) {
    if (this.authService.SignIn(email, password))
    {

    this.authService.SignIn(email, password);
    console.log("email or password is wrong");
    }
  }

如果我从“继续”按钮中删除 [disabled]="!loginForm.valid"，当我键入错误的用户凭据时，控制台日志能够显示“电子邮件或密码错误”。如果用户成功登录，我也能够成功进入下一页。但是，当我在表单无效时禁用它时，当我键入电子邮件并填写密码时，它似乎并没有启用。也没有错误消息。

我可能错过了什么阻止登录表单验证

【问题讨论】：

标签： angular validation

【解决方案1】：

如我所见，您混合了模板驱动表单和模型驱动（反应式）表单。我认为，这是您的主要问题。这段代码可以简单得多。

你的模板应该是：

<form [formGroup]="loginForm" (ngSubmit)="checkSignIn()">
  <mat-form-field>
    <input formControlName="email" name="email" matInput type="text" placeholder="email">
  </mat-form-field>
  <mat-form-field>
    <input formControlName="password" name="password" matInput type="password" placeholder="Password">
  </mat-form-field>
  <div class="d-flex flex-column align-items-center">
    <button mat-raised-button  class="button is-success w-100" type="submit" [disabled]="!loginForm.valid">
      Continue
    </button>
  </div>
  <div *ngIf="!loginForm.valid" class="notification is-danger">
    Something isn't right with the Email or Password
  </div>
</form>

你的组件应该是：

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

checkSignIn() {
  if (this.authService.SignIn(this.loginForm.value.email, this.loginForm.value.password))
  {
    this.authService.SignIn(this.loginForm.value.email, this.loginForm.value.password);
    console.log("email or password is wrong");
  }
}

如您所见，您的代码可能要简单得多。也解决了你的问题。

更多关于响应式表单的信息可以在这里找到：https://angular.io/guide/reactive-forms

【讨论】：

【解决方案2】：

在 Angular 2 中，您可以在下面的代码中使用所有其他版本在 html 文件中更改并仅添加 [disabled]="loginForm.form.invalid"。

<form #loginForm="ngForm"> 
  <button  [disabled]="loginForm.form.invalid" mat-raised-button  class="button is-success w-100" type="submit" 
    (click)="checkSignIn(email.value, password.value)">
    Continue
  </button>
</form>

在 ts 文件中添加：

loginForm : FormGroup;

【讨论】：

【解决方案3】：

想添加到第一个答案，你的表单也需要

(ngSubmit)="loginUser()

类似的东西。在 Angular 表单验证中，您可以使用类似这样的内容来显示电子邮件和密码的错误消息。

对于电子邮件：

<div class="alert alert-danger m-0 text-left animated shake fast"
    *ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">

在你的 ts 文件中，改变

this.loginForm = this.formBuilder.group({
            email: new FormControl(
                '',
                Validators.compose([
                    Validators.required,
                    Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
                ])
            ),
            password: new FormControl(
                '',
                Validators.compose([Validators.required, Validators.minLength(5)])
            )
        });

最后，需要添加formControlName="email"

【讨论】：