Проверка пользовательских форм из бэкэнда - PullRequest
Новая
       14

Проверка пользовательских форм из бэкэнда

0 голосов
/ 26 июня 2019

Я пытаюсь использовать состояние ошибки, полученное с помощью 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, но я не знаю, как показать это на веб-интерфейсе.

1 Ответ

0 голосов
/ 27 июня 2019

Ваш код верен, за исключением того, что this.f и Validators.incorrect

в первую очередь удаляют Validators.incorrect, потому что в угловых Validators

секундах таких встроенных валидаторов нетthis.f должен указывать на this.loginForm.controls, чтобы этот оператор this.f.password.errors.incorrect был действительным.

просто добавьте эту функцию-получатель в ваш класс, и все должно быть в порядке. 

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

Вот рабочая демка: https://stackblitz.com/edit/angular-2pw1ft

...