文章/答案/技术大牛

发布

社区首页 >问答首页 >来自API调用的角8 FormGroup异步验证

问来自API调用的角8 FormGroup异步验证
EN

Stack Overflow用户

提问于 2020-02-17 13:53:14

回答 1查看 1.8K关注 0票数 0

我需要验证唯一的产品标题，除了当前的产品id.

请注意，我需要使用异步验证- API服务调用FormGroup来验证。

函数包含硬编码值2，请忽略它。

product-component.ts

ngOnInit() {
    this.productForm = this.fb.group({
      categoryId: ['', [Validators.required]],
      title: ['', [Validators.required]],
      description: [''],
      oldPrice: ['', [Validators.required, Validators.maxLength(10), Validators.pattern('^\\d+$')]],
      newPrice: ['', [Validators.required, Validators.maxLength(10), Validators.pattern('^\\d+$')]]
}, 
// {validators: ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)}
{asyncValidators: [ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)]}
);

验证类：

export class ValidateUniqueProductTitle {

public static checkProductTitle(productService: ProductService, productId) {
    return (group: AbstractControl): Observable<ValidationErrors | null> => {
        return productService.checkExisting(group.controls['title'].value, productId)
                            .pipe(
                                debounceTime(200),
                                distinctUntilChanged(),
                                take(1),
                                map((data: boolean) => {
                                    console.log('checkExisting api called', data);
                                    return data ?  {title_exists: true} : null;
                                })
                            ); 
        }
}

杂志：

当我使用这一行时，永远不会调用Validate类函数：

{asyncValidators:[ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)]}

当我使用这一行时，函数会被调用，但是API不会被触发：

{validators: ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)}

angular8

angular-reactive-forms

angular-validation

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-18 05:02:22

这是个愚蠢的错误。应该使用FormGroup而不是Abstract Control类型作为回报。

验证类：

export class ValidateUniqueProductTitle {

  public static checkProductTitle(productService: ProductService, productId) {
       return (group: AbstractControl): Observable<ValidationErrors | null> => {
            return productService.checkExisting(group.controls['title'].value, productId)
                        .pipe(
                            debounceTime(200),
                            distinctUntilChanged(),
                            take(1),
                            map((data: boolean) => {
                                console.log('checkExisting api called', data);
                                return data ?  {title_exists: true} : null;
                            })
                        ); 
    }
}

此外，重要的是要注意：

只有当所有同步验证器返回null时，才会触发

异步验证器。

我原以为所有的验证错误(同步和异步)都会同时出现，但这并没有发生。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60263980

复制

相似问题

问来自API调用的角8 FormGroup异步验证
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自API调用的角8 FormGroup异步验证EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自API调用的角8 FormGroup异步验证
EN