Question

我正在构建一个使用此example

的反应式表单

允许我过滤标签并创建新标签。我需要做的是当用户添加新标签时代码应该验证名称不会重复，然后在验证通过时将标签提交给数据库，否则它应该向用户显示错误“标签重复”。

我已经尝试过了：

 this.myForm= this.fb.group({
          name: ...,
          email: ...,
          tag: ['', null,[this.addTextChip(this.httpServices)]]

        });

 addTextChip(httpService: Services): AsyncValidatorFn {
        // call storeTag service which either add the tag to the DB
        // or return "tag is repeated error" 
        // this function should return null or {'TagExist': true}
  }

HTML：

 <input [matChipInputFor]="chipList"
           [matChipInputAddOnBlur]="false"
           [matAutocomplete]="auto"
           (keydown.enter)="addTextChip(chipInput)"
           (input)="textChanged(chipInput.value)"
           autofocus
           #chipInput
          formControlName = "tag"
       />

当我执行代码时，我遇到了与textChanged（）函数相关的错误，该函数说明了“TypeError：无法读取未定义的属性'toLowerCase'”

在继续研究之前，这是最好的方法吗？如果这是我收到此错误的原因？

Answer 1

您正在寻找的是异步验证器。

观看角色表格验证的Kara Erickson（角度核心团队成员，负责@ angular / forms）的视频。

Angular Form Validation - Kara Erickson

验证名称唯一性，然后将名称直接提交给数据库

1 个答案: