如果用户触摸后输入为空/不正确，则显示不同的错误消息

Question

我对另外两个登录/注册组件有同样的代码，它工作正常，但在这个特定的组件中没有任何作用。如果用户触摸输入字段然后离开而没有输入任何内容或输入错误信息，则不会在字段下方弹出“需要电子邮件”或“需要密码”的红色框。这里有什么问题吗？

我的电子邮件正则表达式/逻辑也是正确的吗？即使当前输入字段中的电子邮件类似于“test1@gmail.com”，我的其他登录页面也会显示“需要有效的电子邮件地址”

<div class="container">
  <div class="form centerForm">
    <h1>Child Sign Up</h1>
    <form [formGroup]="signUp" (ngSubmit)="onSignUp(signUp)">
      <div class="form-group">
        <label>Parent ID: </label>
        <input placeholder="ID" formControlName="parentID" required />
        <div
          *ngIf="parentID.invalid && (signUp.submitted || parentID.touched)"
          class="alert alert-danger"
        >
          <div *ngIf="parentID.errors.required">Parent ID is required.</div>
        </div>
        <br />
      </div>

      <div class="form-group">
        <label>Email: </label>
        <input
          placeholder="email"
          formControlName="email"
          required
          pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/"
        />
        <div
          *ngIf="email.invalid && (signUp.submitted || email.touched)"
          class="alert alert-danger"
        >
          <div *ngIf="email.errors.required">Email address is required.</div>
          <div *ngIf="email.errors.pattern">
            Please enter a valid email address.
          </div>
        </div>
        <br />
      </div>

      <div class="form-group">
        <label>Name: </label>
        <input
          placeholder="first and last name"
          formControlName="name"
          required
        />
        <div
          *ngIf="name.invalid && (signUp.submitted || name.touched)"
          class="alert alert-danger"
        >
          <div *ngIf="name.errors.required">Name is required.</div>
        </div>
        <br />
      </div>

      <div class="form-group">
        <label>Password: </label>
        <input
          type="password"
          formControlName="password"
          name="password"
          placeholder="Password"
          ng-minlength="8"
          required
          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
        />
        <div
          *ngIf="password.invalid && (signUp.submitted || password.touched)"
          class="alert alert-danger"
        >
          <div *ngIf="password.errors.required">Password is required.</div>
          <div *ngIf="password.errors.pattern">
            Must contain at least one number and one uppercase and lowercase
            letter, and at least 8 or more characters.
          </div>
        </div>

        <br />
      </div>
      <div class="form-group">
        <label>Confirm Password: </label>
        <input
          type="password"
          formControlName="confirmation"
          name="confirmPassword"
          placeholder="confirm password"
          required
          pattern="{{ password.value }}"
        />
        <div
          *ngIf="
            confirmation.invalid && (signUp.submitted || confirmation.touched)
          "
          class="alert alert-danger"
        >
          <div *ngIf="confirmation.errors.required">
            Confirm password is required.
          </div>
          <div *ngIf="confirmation.errors.pattern">Passwords do not match.</div>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

Answer 1

在您的组件中按如下方式初始化您的 formGroup，

this.signUp = this.formBuilder.group({
    email: ['', Validators.required],
    name: ['', [Validators.required, Validators.email]],
    password : ['', [Validators.required, Validators.minLength(6)]],
    confirmation: ['', [Validators.required, Validators.minLength(6)]]
});

在您的模板中使用验证而不是模式。另外，不要每次都使用 formControl signUp.get('email') 来获取电子邮件，您可以使用简单的 getter，

get email() {
    return this.signUp.get('email');
}

然后，您可以在模板中的任何位置将signUp.controls['email'] 替换为email。

<label>Email</label>
<input placeholder="email"
               formControlName="email"
               required type="text" class="form-control" />
<div *ngIf="(email.dirty || email.touched) && email.invalid && email.errors.required">Email address is required.</div>
<div *ngIf="(email.dirty || email.touched) && email.invalid && email.errors.email">Please enter a valid email address.</div>