具有http可观测性的角4 Validator

Question

我有一个输入组件，在键控时，我想延迟退出，然后启动一个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无效。

Answer 1

我修改了很多代码，不需要对每个类型执行http请求，所以我将其移到父组件，并将结果通过单向绑定传递给这个组件。

似乎我所缺少的只是用Validators.compose([])包装我的两个验证器

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

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() {
  }
}