带有 http observable 的 Angular 4 验证器答案

【问题标题】：Angular 4 Validator with an http observable带有 http observable 的 Angular 4 验证器
【发布时间】：2018-01-18 15:48:14
【问题描述】：

我有一个输入组件，我想在 keyup 上延迟一个去抖动，然后触发一个有效的 http 请求

import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { KeywordsApiService } from '../keywords-api.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';

@Component({
  selector: 'input-group',
  templateUrl: './input-group.component.html',
  styleUrls: ['./input-group.component.scss']
})
export class InputGroupComponent implements OnInit {

  @Input() data: any;
  valid: boolean;
  invalidName: boolean;
  complexForm: FormGroup;
  pattern: RegExp;

  @Output() clicked: EventEmitter<boolean> = new EventEmitter();
  @Output() keyedup: EventEmitter<boolean> = new EventEmitter();

  constructor(private fb: FormBuilder, private keywordsApiService: KeywordsApiService) { }

  ngOnInit() {
    console.log(this.data);

    this.complexForm = this.fb.group({
      input: ['', Validators.pattern(this.data.pattern), this.invalidName]
    });
    console.log(this.complexForm.controls['input']);

    this.complexForm.valueChanges
      .subscribe(x => console.log(x));

    this.complexForm.valueChanges
      .debounceTime(500)
      .switchMap(val => this.keywordsApiService.getGroups())
      .subscribe(data => {
          this.invalidName = data.some(item => {
            return item == this.data.value
          });
          console.log(this.invalidName);
        });

  }

  click() {
    console.log(this.data.value);
    this.clicked.emit(true);
  }

  onKey() {
  }
}

我在输入上有一个模式验证器，但我还想检查 this.validName 是真还是假，并在验证器中使用它。

我已经更新了上面的代码。

如果return item == this.data.value 返回true 那么我想让this.complexForm 说input 无效。

【问题讨论】：

How to add debounce time to an async validator in angular 2?的可能重复
我想延迟一个去抖动，然后触发一个有效的 http 请求 有效还是无效？或者问题是什么？ :)
@AJT_82 好的 this.keywordsApiService.getGroups() 触发和 console.log(this.validName);声明真或假，但如果它是真的，我希望验证器验证失败
已更新代码
所以基本上你想要一个额外的验证器？ :)

标签： angular rxjs observable

【解决方案1】：

我对代码进行了相当多的更改，我不需要对每种类型都执行 http 请求，因此我将其移至父组件并通过单向绑定将结果传递给该组件。

似乎我缺少的只是将我的 2 个验证器包装在 Validators.compose([])

我还需要更改segmentValidator 来比较段数组，看看'input' 中的control.value 是否匹配，这是按以下方式完成的。

import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';

@Component({
  selector: 'input-group',
  templateUrl: './input-group.component.html',
  styleUrls: ['./input-group.component.scss']
})
export class InputGroupComponent implements OnInit {

  @Input() data: any;
  @Input() segments: any[];
  valid: boolean;
  invalidName: boolean;
  complexForm: FormGroup;
  pattern: RegExp;

  @Output() clicked: EventEmitter<boolean> = new EventEmitter();
  @Output() keyedup: EventEmitter<boolean> = new EventEmitter();

  constructor(private fb: FormBuilder) { }

  segmentValidator(control: AbstractControl): {[key: string]: any} {
    const input = control.value;
    if (this.segments) {
      return this.segments.includes(input) ? { nomatch: true } : null;
    }

  }

  ngOnInit() {
    console.log(this.data);

    this.complexForm = this.fb.group({
      'input': ['', Validators.compose([Validators.pattern(this.data.pattern), this.segmentValidator.bind(this)])]
    });

    console.log(this.complexForm.controls['input']);

    this.complexForm.valueChanges
      .subscribe(x => x);

    this.complexForm.valueChanges
      .debounceTime(500)
      .subscribe(data => {
          this.keyedup.emit(this.data.value);
      });

  }

  click() {
    console.log(this.data.value);
    this.clicked.emit(true);
  }

  onKey() {
  }
}

【讨论】：