Как использовать debounceTime в угловом компоненте? - PullRequest
Новая
       24

Как использовать debounceTime в угловом компоненте?

0 голосов
/ 07 июня 2018

Мое требование состоит в том, чтобы выполнять реактивную проверку полей формы таким образом, чтобы сообщения об ошибках отображались только после того, как пользователь перестал печатать.

Как я могу сделать это, используя реактивные формы и Rxjs debounceTime?

Я ищу решение, которое работает с реактивными формами

1 Ответ

0 голосов
/ 07 июня 2018

(или, по крайней мере, a) способ заставить это работать - динамически удалять и добавлять валидаторы по ходу работы.

В своих входных данных использовать привязку keydown, которая удалитудалить валидаторы, когда пользователь начинает печатать, и привязку keyup, которая будет проходить через канал debounceTime, а затем повторно применять валидаторы (но только после истечения указанного времени отладки).

Код здесь: 

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'form-component',
  template: `
    <form [formGroup]="formGroup">
      <input type="text" formControlName="name" (keyup)="onKeyUp()" (keydown)="onKeyDown()" [ngClass]="{ 'invalid': formGroup.controls.name.invalid }">
    </form>
  `,
  styles: [
    '.invalid { border-color: red; color: red; }'
  ]
})
export class FormComponent implements OnInit {

  formGroup: FormGroup;
  subject: Subject<any> = new Subject();

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      name: [ '' ]
    });

    // Subscribe to the subject, which is triggered with each keyup
    // When the debounce time has passed, we add a validator and update the form control to check validity
    this.subject
      .pipe(debounceTime(500))
      .subscribe(() => {
          this.formGroup.controls.name.setValidators([ Validators.minLength(5) ]);
          this.formGroup.controls.name.updateValueAndValidity();
        }
      );
  }

  onKeyUp(): void {
    this.subject.next();
  }

  onKeyDown(): void {
    // When the user starts to type, remove the validator
    this.formGroup.controls.name.clearValidators();
  }

}

И StackBlitz здесь: https://stackblitz.com/edit/debounce-validator

...