angular2 formGroup 的唯一值验证器答案

【问题标题】：Unique value validator for angular2 formGroupangular2 formGroup 的唯一值验证器
【发布时间】：2021-07-16 19:14:47
【问题描述】：

我正在使用 Angular 反应式 formsGroup 和 formControl。我的要求是每个 formControl 的值应该是唯一的，如果用户尝试添加重复值，那么它应该显示验证错误。

创建表单组

 this.contryCodeForm = this.formBuilder.group({
            US: ['+1', , [],[this.uniqueValidator, Validators.required]],
            UK: ['+44',  [],[this.uniqueValidator, Validators.required]],
            India: ['+91', [],[this.uniqueValidator, Validators.required]],
            email: ['+61', [],[this.uniqueValidator, Validators.required]]
        });]

如果有人尝试编辑已被其他国家/地区采用的值，我想添加验证。

我已经尝试实现 this.uniqueValidator

const values = Object.keys(formGroup.value).map(key => formGroup.value[key])

const filtered = values.filter(x=>x === control.value); 
if (filtered.length > 1) {
return {message: "This field must be unique value"}
}

但它不起作用

任何帮助表示赞赏

【问题讨论】：

标签： angular angular-validator

【解决方案1】：

我认为你应该这样做：

创建验证器，采用formGroup

export class MyOwnValidator {
    
    static checkDuplicates(formGroup: FormGroup): ValidationErrors | null {
        //here you can get access to all controls 
          and implement the logic for checking duplicates
    }
}

在 formGroup 中添加此验证器

this.contryCodeForm = this.formBuilder.group({
            US: ['+1', , [],[ Validators.required]],
            UK: ['+44',  [],[ Validators.required]],
            India: ['+91', [],[Validators.required]],
            email: ['+61', [],[Validators.required]]
        }, , {
            validators: MyOwnValidator.checkDuplicates
        })

【讨论】：