Angular2 - カスタムバリデータを使用して2つのコントロール値を比較

Question

カスタムバリデータを使用して2つのフォームコントロール値を検証する必要があります。これはformbuilderを使用して行う必要があります。

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}; 
    } 
    } 
}