Question

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
import { AService } from "app/a/services/a.service";
import { Subscription } from 'rxjs/Subscription';
import { Observable } from "rxjs/Rx";

@Component({
selector: 'app-a',
templateUrl: './a.component.html',
styleUrls: ['./a.component.css']})
export class AComponent implements OnInit {

 constructor(private aService: AService) {}

ngOnInit() {
    this.addEditAForm = new FormGroup({
        'name': new FormControl(null, [Validators.required],this.ValidateNameAsyn)
});

validateNameAsync(control: FormControl): Promise<any> | Observable<any> {
 return Observable.timer(500).switchMap(() => {
        return this.aService
            .nameExists(control.value)
            .map(result => (result ? { nameExists: true } : null));
    });
}

AService

nameExists(name: string) {
    let url = BaseApiService.urls.a + '/name=' + name;
    return this.http.get(url, this.baseApiService.setOptions(this.userService.userAuthToken()));
}

这是我的代码，我在其中为响应式表单控件创建异步验证器validateNameAsync。我还没有能够测试它是否有效，因为如果名称不存在则api返回404，如果存在，则返回对象。我的问题是，在这种情况下是否有可能处理这种反应？如果是的话怎么样？感谢

Answer 1

要更好地控制异步验证器，请不要按照Angular doc的规定使用它。编写一个验证器函数，它将控件的值作为参数而不是FormControl。这样，您就可以处理HTTP请求，该请求将值验证为任何其他HTTP请求，并使用catch（）运算符来处理404.

看看这个代码示例，其中我有两个异步验证器：第一个使用FormControl但第二个（在ngOnInit中）没有。 https://github.com/Farata/angular2typescript/tree/master/Angular4/form-samples/src/app/async-validator

我本可以在那里添加一个catch（）运算符，如果是404，我会将验证错误设置为“由于服务器问题而无法验证ssn”。

异步验证器，其中api在假的情况下返回404。 Angular4

1 个答案: