Question

我能够显示服务器验证消息，但是问题是，当我使用服务器验证时，当用户再次开始在客户端验证中填充单个输入时，验证消息没有像往常一样隐藏。在这种情况下，当用户开始键入时如何隐藏它们？

组件类：

export class RegisterComponent implements OnInit {
  constructor(private authService: AuthService, private fb: FormBuilder) {}
  public registrationForm = this.fb.group({
    firstname: [""],
    lastname: [""],
    email: [""],
    password: [""],
    password_confirmation: [""]
  });
  ngOnInit() {
  }
  errors = [];
  registerUser() {
    console.log(this.registrationForm);
    this.authService.registerUser(this.registrationForm.value).subscribe(
      res => console.log(res),
      err => {
        this.errors = err.error.message;
        console.log(this);
      }
    );
  }
}

表格：

<div class="row pt-5">
  <div class="col-md-6 mx-auto">
    <div class="card rounded-0">
      <div class="card-header">
        <h3 class="mb-0">Register</h3>
      </div>
      <div class="card-body">
        <form
          class="form"
          (ngSubmit)="registerUser()"
          [formGroup]="registrationForm"
        >
          <div class="form-group">
            <label>Firstname</label>
            <input
              type="text"
              formControlName="firstname"
              name="firstname"
              class="form-control rounded-0"
              [class.is-invalid]="errors.firstname"
            />
            <span class="invalid-feedback" *ngIf="errors.firstname">{{
              errors.firstname
            }}</span>
          </div>
          <div class="form-group">
            <label>Lastname</label>
            <input
              type="text"
              formControlName="lastname"
              name="lastname"
              class="form-control rounded-0"
              [class.is-invalid]="errors.lastname"
            />
            <span class="invalid-feedback" *ngIf="errors.lastname">{{
              errors.lastname
            }}</span>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input
              type="email"
              formControlName="email"
              name="email"
              class="form-control rounded-0"
              [class.is-invalid]="errors.email"
            />

            <span class="invalid-feedback" *ngIf="errors.email">{{
              errors.email
            }}</span>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input
              type="password"
              formControlName="password"
              name="password"
              class="form-control rounded-0"
              [class.is-invalid]="
                errors.password
              "
            />
            <span class="invalid-feedback" [class.d-none]="errors.password">{{
              errors.password
            }}</span>
          </div>
          <div class="form-group">
            <label>Confirm Password</label>
            <input
              type="password"
              formControlName="password_confirmation"
              name="password_confirmation"
              class="form-control rounded-0"
            />
          </div>
          <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary float-right">
              Register
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

注意：：我不是在使用Angular的内置验证器，而是想使用服务器端验证来实现相同的功能。

Answer 1

使用输入的keyup / down事件将错误改回false，以防出现电子邮件：

<input 
   // other properties ... 
   (keyup)="errors.email = false"/>

它们应该可以正常工作。

我无法自动隐藏服务器验证消息

1 个答案: