web-dev-qa-db-ja.com

angularコンポーネントでdebounceTimeを使用する方法は？

私の要件は、ユーザーが入力を停止した後にのみエラーメッセージが表示されるように、リアクティブフォームフィールドの検証を実行することです。

リアクティブフォームとRxjs debounceTimeを使用してこれをどのように達成できますか？

リアクティブフォームで機能するソリューションを探しています

angularrxjsdebounce
3
Rohit

debounceTimeは、指定された期間待機してから、subscribeメソッドを呼び出します。例えば; debounceTime(1000)は1秒間待機します。 pipesを介して実装されます。

これは、任意のサブスクライブメソッドに追加できます。以下は実際の例です

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

// dynamic forms
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';


@Component({
    selector: 'app-customer-form',
    templateUrl: './customer-form.component.html',
})
export class CustomerFormComponent implements OnInit {

    emailMessage : string;

    private validationMessages = {
        required: "Email field is required",
        email: "Please enter a valid Email"
    }

    customerForm: FormGroup;

    customer = new Customer();

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.customerForm = this.fb.group({
            emailAddress: ['',
                [
                    Validators.required,
                    Validators.email
                ]
            ]
        })

        const emailControl = this.customerForm.get('emailAddress');
        emailControl.valueChanges.pipe( debounceTime(1000) ).subscribe(
            value => this.setEmailMessage(emailControl)
        )
    }

    setEmailMessage( c: AbstractControl ) : void {
        this.emailMessage = '';

        if ( (c.touched || c.dirty) && c.errors ) {
            this.emailMessage = Object.keys(c.errors).map( key => this.validationMessages[key]).join(' ');
        }

    }

}

テンプレートで

<input 
    class="form-control"
    id="emailId" type="email"
    placeholder="Email (required)"
    formControlName="emailAddress"
    [ngClass]="{ 'is-invalid': emailMessage }"/>
    <span class="invalid-feedback">
    {{ emailMessage }}
    </span>
0
Aamer Shahzad