Angular2 — сравнить два контрольных значения с помощью пользовательского валидатора.

Мне нужно проверить два значения элемента управления формы с помощью пользовательского валидатора. Делать это нужно через формбилдер.

Component.ts

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

Здесь мне нужно добавить собственный валидатор, где fromTotal и total должны быть равны.


validation angular2-forms angular2-formbuilder custom-validators
person user2401393    schedule 19.07.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это:

 <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>
person Vignesh    schedule 19.07.2017
comment
Мне нужен собственный валидатор, чтобы сделать это. - person user2401393; 19.07.2017

arrow_upward
0
arrow_downward

пытаться:

// 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')});

равно.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}; 
    }
  }
}
person Andriy    schedule 20.07.2017