来自后端的自定义表单验证

Question

我正在尝试使用通过 JSON 检索到的错误状态，并将 angular 中的这些错误用于表单。

我尝试编辑 formBuilder.group 以处理收到的内容，但它不起作用。

ngOnInit() {
  this.loginForm = this.formBuilder.group({
    username: ['', Validators.required],
    password: ['', Validators.required, Validators.incorrect],
  });

  // get return url from route parameters or default to '/'
  this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}

this.authService.login(this.f.username.value, this.f.password.value)
.pipe(first())
.subscribe(
  data => {
    if (data.errors) {
      this.f.password.errors.incorrect = data.errors.pass;
    } else {
      this.router.navigate([this.returnUrl]);
    }
  },
  error => {
    this.error = error;
    this.loading = false;
  });

<h2>Login</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="username">Username</label>
      <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
      <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
          <div *ngIf="f.username.errors.required">Username is required</div>
      </div>
  </div>
  <div class="form-group">
      <label for="password">Password</label>
      <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
          <div *ngIf="f.password.errors.required">Password is required</div>
          <div *ngIf="f.password.errors.incorrect">Password is incorrect</div>
      </div>
  </div>
  <div class="form-group">
      <button [disabled]="loading" class="btn btn-primary">Login</button>
  <div *ngIf="error" class="alert alert-danger">{{error}}</div>
</form>

  // login call
  login(username: string, password: string) {
    return this.http.post<any>(this._loginUrl, { username, password })
        .pipe(map(u_data => {

            return u_data;
        }));
  }

我从 data.errors 获得了正确的数据，但我不知道如何在前端显示它。

Answer 1

除了 this.f 和 Validators.incorrect

你的代码是正确的

首先删除 Validators.incorrect 因为 angular Validators

中没有这样的 built-in 验证器

second this.f 应指向 this.loginForm.controls 以使此 this.f.password.errors.incorrect 语句有效。

只需将此 getter 函数添加到您的 class 中，一切都应该没问题。

  get f() {
    return this.loginForm.controls;
  }

这是一个工作演示：https://stackblitz.com/edit/angular-2pw1ft

来自后端的自定义表单验证

Custom form validation coming from backend

formbuilder

angular