Angular2 - 使用自定义验证器比较两个控件值

Question

我需要使用自定义验证器验证两个表单控件值。它应该使用表单生成器来完成。

Component.ts
this.mainForm = this.fb.group({
fromtotal: [0, [Validators.Required]],
toTotal: [0, [Validators.Required]],
option: [value, Validators.required]
});

在这里，我需要添加自定义验证器，其中fromTotal和tototal应该相等。

Answer 1

试试这个：

<div class="form-group">
<label for="">Password</label>
<input type="password" class="form-control" name="password" [ngModel]="user.password" 
required **validateEqual="confirmPassword"** reverse="true" #password="ngModel">
</div>
<div class="form-group">
<label for="">Retype password</label>
<input type="password" class="form-control" name="confirmPassword" [ngModel]="user.confirmPassword" 
required **validateEqual="password"** reverse="false" #confirmPassword="ngModel">
</div>

Answer 2

尝试：

// import here your EqualsValidator
import { EqualsValidator} from '...';
...
...
...
this.mainForm = this.fb.group({
fromtotal: [0, [Validators.Required]],
toTotal: [0, [Validators.Required]],
option: [value, Validators.required]
}, {validator: EqualsValidator.equals('fromtotal', 'toTotal')});

equals.validator.ts：

import { FormGroup } from '@angular/forms';
export class EqualsValidator {
/**
* compares 2 values
* */
static equals(valueControlNameA: string, valueControlNameB: string) {
return (group: FormGroup): {[key: string]: any} => {
// get values
let valueA = group.get(valueControlNameA).value;
let valueB = group.get(valueControlNameB).value;
return valueA === valueB ? null : {equals: true}; 
}
}
}