如何根据电子邮件模式的输入状态禁用按钮？

Question

我有一个带有 2 个输入字段和登录按钮的登录表单，其中一个输入字段具有有效电子邮件的电子邮件模式。如果其中一个输入字段为空，则登录按钮将被禁用。但我的问题是，如果输入错误的电子邮件模式，会出现错误消息，但按钮不会变为禁用。

这里是场景：

这是我这部分的模板代码：

<form #loginForm="ngForm" (ngSubmit)="loginUser()">
    <div class="form-group">
      <label for="email">Email address:</label>
      <input type="email" required #email="ngModel" class="input-field-background form-control" [class.is-invalid]="email.invalid && email.touched" [(ngModel)]="user.email" pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" [ngModelOptions]="{standalone: true}">

    </div>
    <div *ngIf="email.errors && (email.invalid && email.touched)">
        <small class="error-text" *ngIf="email.errors.required">Email is required</small>
        <small class="error-text" *ngIf="email.errors.pattern">Enter a valid email</small>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input #password="ngModel" required type="password" [class.is-invalid]="password.invalid && password.touched" class="input-field-background form-control" [(ngModel)]="user.password" [ngModelOptions]="{standalone: true}">
      <small class="error-text" [class.d-none]="password.valid || password.untouched">Password is required</small>
    </div>
    <small class="error-text">{{msg}}</small>
    <div>
      <button type="submit" class="login-button btn btn-info" [disabled] = "!user.email || !user.password">Login</button>
      <small class="small-style float-right" [routerLink]="['/registration']">New User ? Register here</small>
    </div>
  </form>

我该如何解决这个问题？有没有办法简单地在模板文件上解决这个问题，或者我应该对相应的 .ts 文件进行一些操作，比如分配一个新变量或布尔值等...

Answer 1

@Chris Garsonn，您可以在提交按钮中检查电子邮件验证。

[disabled] = "!user.email || email.invalid || !user.password"