Question

我正在尝试使用通过JSON检索的错误状态，并将这些错误以角度的形式用于表单。

我已经尝试编辑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，因为角度Validators中没有这样的内置验证器

第二this.f应该指向this.loginForm.controls，以使此this.f.password.errors.incorrect语句有效。

只需将此getter函数添加到您的类中，一切就可以了。

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

这是一个有效的演示：https://stackblitz.com/edit/angular-2pw1ft

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

1 个答案: