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

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"