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

【问题标题】：Angular2 - Compare two control values using custom ValidatorAngular2 - 使用自定义验证器比较两个控件值
【发布时间】：2017-12-24 17:20:29
【问题描述】：

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

Component.ts

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

这里我需要在 fromTotal 和 total 应该相等的地方添加自定义验证器。

【问题讨论】：

标签： validation angular2-forms custom-validators angular2-formbuilder

【解决方案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>

【讨论】：

我需要自定义验证器来执行此操作。

【解决方案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}; 
    }
  }
}

【讨论】：