Javascript 如何在angular 4中显示来自自定义验证器函数的自定义错误消息？ 请考虑下面的自定义验证器函数，该函数调用后端的API来获取一些数据，检查它们是否与当前表单输入有关，如果当前表单输入为重复值：，则返回错误。 //check to see if the new category name entered is already in the system categoryNameUnique(c: FormControl) { let categoryNameAlreadyExists: boolean = false; //get list of current categories from the server. return this.inventoryCategoryService.getAll().map(items => { for (let item of items) { if (item.Name == c.value) { categoryNameAlreadyExists = true; break; } } if (categoryNameAlreadyExists) { //name is not unique return { categoryNameUnique: false } } //not a duplicate, all good return null; }); }

您将看到这个函数返回一个可观察的（因为我必须返回后端服务器获取一些数据来进行验证）。验证器就像一个符咒，没有问题。但是，当这个验证器在我相应的HTML视图中无效时，我不知道如何向用户显示适当的消息。如果这个函数没有返回一个可观察的值，我会这样做：

<div *ngIf="form.controls['categoryName'].errors?.categoryNameUnique">
    This category name is already taken
</div>

必需的minLength和maxLength验证器是synchronus，但我的自定义验证器categoryNameUnique是异步的，因此应该单独编写。我将设置更改为以下内容，现在一切正常：

constructor(private fb: FormBuilder, private router: Router, private inventoryCategoryService: InventoryCategoryService) {
    this.form = fb.group({
        'categoryName': [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
            Validators.composeAsync([this.categoryNameUnique.bind(this)])]
    });
}

---

我认为您的问题可能是如何将异步验证器应用于控件。根据您对

form.controls.categoryName

的使用情况，我假设您正在使用formbuilder创建表单。在这种情况下，您需要提供异步验证器作为组params数组中的第三个参数，如下所示：

this.form = this.formBuilder.group({
  categoryName: ["", [], [categoryNameUnique]]
});

<div *ngIf="form.controls.categoryName.hasError('categoryNameUnique')">
    The category name is not unique!
</div>

这样设置之后，您应该能够在错误中看到它

显示自定义验证错误的首选方式如下：

this.form = this.formBuilder.group({
  categoryName: ["", [], [categoryNameUnique]]
});

<div *ngIf="form.controls.categoryName.hasError('categoryNameUnique')">
    The category name is not unique!
</div>

类别名称不唯一！

这个

应该可以正常工作，它对您有什么影响？@Maximus，categoryNameUnique不会出现在我的错误对象中。相反，errors对象包含可观察的属性：

操作符

和

源

。如果我检查这两个属性，它不会显示任何与我从observable中传回的categoryNameUnique自定义错误对象相关的内容。奇怪，你能设置一个plunker吗？还有，你的

验证
方法看起来如何？谢谢@Maximus，我已经更新了我的原始帖子，描述了问题是什么以及我是如何解决的。谢谢@Dhraz。。。你回答了，我自己想出来的。无论如何，我感谢你的帮助，并将你的回答标记为正确答案。没问题，我希望它能帮助其他有同样问题的人。