Angular2中formGroup的唯一值验证器的实现方法。
在Angular2中，formGroup提供了很多内置的Validators，但它们并不能满足所有情况。一个常见的需求是要求formGroup中的某些字段具有唯一性，即不允许出现重复值。为了实现这一需求，我们可以自定义一个唯一值验证器。
下面是一个简单的实现例子：
先定义一个类UniqueValueValidator，实现Validator接口。
import { Injectable } from '@angular/core'; import { Validator, FormGroup } from '@angular/forms';
@Injectable({ providedIn: 'root' }) export class UniqueValueValidator implements Validator {
validate(formGroup: FormGroup) { let name = formGroup.controls['name'].value; let otherField = formGroup.controls['otherField'].value;
if (name && otherField && name === otherField) {
return {uniqueValue: true};
}
return null;
} }
在上面的实现中，我们检查了formGroup的两个字段name和otherField，如果这两个字段的值相同，就返回{uniqueValue: true}，否则返回null。
然后在使用的组件中将这个validator绑定到formGroup中的某个字段上。例如：
import { Component } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { UniqueValueValidator } from './unique-value-validator';
@Component({
selector: 'app',
template:
})
export class AppComponent {
form = this.fb.group({
name: ['', Validators.required],
otherField: ['', Validators.required]
}, {
validators: [this.uniqueValue.validate.bind(this.uniqueValue)]
});
constructor(private fb: FormBuilder, private uniqueValue: UniqueValueValidator) {} }
这里使用了Angular自带的FormBuilder构建了一个formGroup，并在validators中传入了我们自定义的验证器。在template中，我们通过form.get('name').hasError('uniqueValue')判断该字段是否有uniqueValue这个错误。当出现该错误时，我们就显示相应的提示信息。
以上即为Angular2中实现formGroup的唯一值验证器的方法。