Чи можливо створити валідатор, який може використовувати декілька значень, щоб вирішити, чи дійсне моє поле?

Наприклад, якщо бажаний спосіб контакту з клієнтом - електронною поштою, тоді слід вказати поле електронної пошти.

Дякую.

Оновлено прикладним кодом ...

    import {Component, View} from 'angular2/angular2';
    import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';

    @Component({
        selector: 'customer-basic',
        viewInjector: [FormBuilder]
    })
    @View({
        templateUrl: 'app/components/customerBasic/customerBasic.html',
        directives: [formDirectives]
    })
    export class CustomerBasic {
        customerForm: ControlGroup;

        constructor(builder: FormBuilder) {
            this.customerForm = builder.group({
                firstname: [''],
                lastname: [''],
                validateZip: ['yes'],
                zipcode: ['', this.zipCodeValidator] 
                // I only want to validate using the function below if the validateZip control is set to 'yes'
            });
        }

        zipCodeValidator(control) {
            if (!control.value.match(/\d\d\d\d\d(-\d\d\d\d)?/)) {
                return { invalidZipCode: true };
            }
        }

    }

Для того, щоб ще раз повторити методи, які опублікували інші, саме таким чином я створював FormGroupвалідатори, які не включають декілька груп.

У цьому прикладі просто введіть ключові назви полів passwordта confirmPassword.

// Example use of FormBuilder, FormGroups, and FormControls
this.registrationForm = fb.group({
  dob: ['', Validators.required],
  email: ['', Validators.compose([Validators.required,  emailValidator])],
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required]
}, {validator: matchingPasswords('password', 'confirmPassword')})

Для того, Validatorsщоб приймати параметри, вони повинні повернути a functionз параметром a FormGroupабо FormControlяк. У цьому випадку я перевіряю а FormGroup.

function matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
  return (group: FormGroup): {[key: string]: any} => {
    let password = group.controls[passwordKey];
    let confirmPassword = group.controls[confirmPasswordKey];

    if (password.value !== confirmPassword.value) {
      return {
        mismatchedPasswords: true
      };
    }
  }
}

Технічно я міг би підтвердити будь-які два значення, якби знав їхні ключі, але я вважаю за краще називати своє Validatorsте саме, що помилка, яку вони повернуть. Функцію можна змінити, щоб взяти третій параметр, який представляє ключову назву повернутої помилки.

Оновлено 6 грудня 2016 року (v2.2.4)

Повний приклад: https://embed.plnkr.co/ukwCXm/

Відповідь Дейва була дуже, дуже корисною. Однак незначна модифікація може допомогти деяким людям.

Якщо вам потрібно додати помилки до Controlполів, ви можете зберегти фактичну побудову форми та валідатори:

// Example use of FormBuilder, ControlGroups, and Controls
this.registrationForm= fb.group({
  dob: ['', Validators.required],
  email: ['', Validators.compose([Validators.required,  emailValidator])],
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required]
}, {validator: matchingPasswords('password', 'confirmPassword')})

Замість того, щоб встановлювати помилку на ControlGroup, зробіть це у фактичному полі так:

function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
  return (group: ControlGroup) => {
    let passwordInput = group.controls[passwordKey];
    let passwordConfirmationInput = group.controls[passwordConfirmationKey];
    if (passwordInput.value !== passwordConfirmationInput.value) {
      return passwordConfirmationInput.setErrors({notEquivalent: true})
    }
  }
}

Реалізуючи валідатори для декількох полів форм, вам доведеться переконатися, що валідатори будуть повторно оцінені, коли кожен елемент управління формою оновлюється. Більшість прикладів не дає рішення для такого сценарію, але це дуже важливо для послідовності даних та правильної поведінки.

Перегляньте мою реалізацію спеціального валідатора для Angular 2, який враховує це: https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30 .

Я використовую otherControl.valueChanges.subscribe()для прослуховування змін в thisControl.updateValueAndValidity()іншому елементі управління та для запуску чергового раунду перевірки, коли інший елемент управління змінено.

Я копіюю код нижче для подальшого використання:

match-other-validator.ts

import {FormControl} from '@angular/forms';


export function matchOtherValidator (otherControlName: string) {

  let thisControl: FormControl;
  let otherControl: FormControl;

  return function matchOtherValidate (control: FormControl) {

    if (!control.parent) {
      return null;
    }

    // Initializing the validator.
    if (!thisControl) {
      thisControl = control;
      otherControl = control.parent.get(otherControlName) as FormControl;
      if (!otherControl) {
        throw new Error('matchOtherValidator(): other control is not found in parent group');
      }
      otherControl.valueChanges.subscribe(() => {
        thisControl.updateValueAndValidity();
      });
    }

    if (!otherControl) {
      return null;
    }

    if (otherControl.value !== thisControl.value) {
      return {
        matchOther: true
      };
    }

    return null;

  }

}

Використання

Ось як можна використовувати його з реактивними формами:

private constructForm () {
  this.form = this.formBuilder.group({
    email: ['', [
      Validators.required,
      Validators.email
    ]],
    password: ['', Validators.required],
    repeatPassword: ['', [
      Validators.required,
      matchOtherValidator('password')
    ]]
  });
}

Тут можна знайти більш сучасні валідатори: moebius-mlm / ng-валідатори .

Я використовую Angular 2 RC.5, але не зміг знайти ControlGroup, грунтуючись на корисній відповіді Дейва. Я виявив, що FormGroup працює замість цього. Тож я зробив невеликі оновлення кодів Дейва і думав, що поділюся з іншими.

У свій компонентний файл додайте імпорт для FormGroup:

import {FormGroup} from "@angular/forms";

Визначте свої дані у випадку, якщо вам потрібно отримати доступ до контролю форми безпосередньо:

oldPassword = new FormControl("", Validators.required);
newPassword = new FormControl("", Validators.required);
newPasswordAgain = new FormControl("", Validators.required);

У своєму конструкторі інстанціюйте форму:

this.form = fb.group({
  "oldPassword": this.oldPassword,
  "newPassword": this.newPassword,
  "newPasswordAgain": this.newPasswordAgain
}, {validator: this.matchingPasswords('newPassword', 'newPasswordAgain')});

Додайте у ваш клас функцію matchPasswords:

matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
  return (group: FormGroup) => {
    let passwordInput = group.controls[passwordKey];
    let passwordConfirmationInput = group.controls[passwordConfirmationKey];
    if (passwordInput.value !== passwordConfirmationInput.value) {
      return passwordConfirmationInput.setErrors({notEquivalent: true})
    }
  }
}

Сподіваюся, це допомагає тим, хто використовує RC.5. Зауважте, що я ще не тестував RC.6.

Багато копати в кутовому джерелі, але я знайшов кращий спосіб.

constructor(...) {
    this.formGroup = builder.group({
        first_name:        ['', Validators.required],
        matching_password: builder.group({
            password: ['', Validators.required],
            confirm:  ['', Validators.required]
        }, this.matchPassword)
    });

    // expose easy access to passworGroup to html
    this.passwordGroup = this.formGroup.controls.matching_password;
}

matchPassword(group): any {
    let password = group.controls.password;
    let confirm = group.controls.confirm;

    // Don't kick in until user touches both fields   
    if (password.pristine || confirm.pristine) {
      return null;
    }

    // Mark group as touched so we can add invalid class easily
    group.markAsTouched();

    if (password.value === confirm.value) {
      return null;
    }

    return {
      isValid: false
    };
}

Частина HTML для групи паролів

<div ng-control-group="matching_password" [class.invalid]="passwordGroup.touched && !passwordGroup.valid">
    <div *ng-if="passwordGroup.touched && !passwordGroup.valid">Passwords must match.</div>
    <div class="form-field">
        <label>Password</label>
        <input type="password" ng-control="password" placeholder="Your password" />
    </div>
    <div class="form-field">
        <label>Password Confirmation</label>
        <input type="password" ng-control="confirm" placeholder="Password Confirmation" />
    </div>
</div>

Щоб розширити відповідь matthewdaniel, оскільки це не зовсім коректно. Ось приклад коду, який показує, як правильно призначити валідатор a ControlGroup.

import {Component} from angular2/core
import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/common'

@Component({
  selector: 'my-app',
  template: `
    <form [ngFormModel]="form">
      <label for="name">Name:</label>
      <input id="name" type="text" ngControl="name">
      <br>
      <label for="email">Email:</label>
      <input id="email" type="email" ngControl="email">
      <br>
      <div ngControlGroup="matchingPassword">
        <label for="password">Password:</label>
        <input id="password" type="password" ngControl="password">
        <br>
        <label for="confirmPassword">Confirm Password:</label>
        <input id="confirmPassword" type="password" ngControl="confirmPassword">
      </div>
    </form>
    <p>Valid?: {{form.valid}}</p>
    <pre>{{form.value | json}}</pre>
  `
})
export class App {
  form: ControlGroup
  constructor(fb: FormBuilder) {
    this.form = fb.group({
      name: ['', Validators.required],
      email: ['', Validators.required]
      matchingPassword: fb.group({
        password: ['', Validators.required],
        confirmPassword: ['', Validators.required]
      }, {validator: this.areEqual})
    });
  }

  areEqual(group: ControlGroup) {
    let val;
    let valid = true;

    for (name in group.controls) {
      if (val === undefined) {
        val = group.controls[name].value
      } else {
        if (val !== group.controls[name].value) {
          valid = false;
          break;
        }
      }
    }

    if (valid) {
      return null;
    }

    return {
      areEqual: true
    };
  }
}

Ось робочий приклад: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview

Ось ще один варіант, який мені вдалося придумати, що не залежить від цілого або підрозділу, ControlGroupа прив’язується безпосередньо до кожного Control.

Проблема у мене була елементи управління , які залежали один від одного не було ієрархічно разом , так що я не зміг створити ControlGroup. Також у моєму CSS було встановлено, що кожен елемент керує існуючими кутовими класами, щоб визначити, чи відображати стилістику помилок, що було складніше при роботі з груповою валідацією замість перевірки конкретного контролю. Спроба визначити, чи був єдиний контроль дійсним, неможливо, оскільки перевірка була прив'язана до групи елементів контролю, а не до кожного окремого контролю.

У моєму випадку я хотів, щоб значення поля вікна було визначити, потрібне інше поле чи ні.

Це побудовано за допомогою Builder форм на компоненті. Для обраної моделі замість того, щоб безпосередньо прив’язувати її до значення об'єкта запиту, я зв'язав її для отримання / встановлення функцій, які дозволять мені обробляти події "на зміну" для управління. Тоді я зможу вручну встановити валідацію для іншого елемента управління залежно від вибору елементів управління новим значенням.

Ось відповідна частина перегляду:

<select [ngFormControl]="form.controls.employee" [(ngModel)]="employeeModel">
  <option value="" selected></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>
...
<input [ngFormControl]="form.controls.employeeID" type="text" maxlength="255" [(ngModel)]="request.empID" />

Відповідна частина компонента:

export class RequestComponent {
  form: ControlGroup;
  request: RequestItem;

  constructor(private fb: FormBuilder) {
      this.form = fb.group({
        employee: new Control("", Validators.required),
        empID: new Control("", Validators.compose([Validators.pattern("[0-9]{7}"]))
      });

  get employeeModel() {
    return this.request.isEmployee;
  }

  set employeeModel(value) {
    this.request.isEmployee = value;
    if (value === "Yes") {
      this.form.controls["empID"].validator = Validators.compose([Validators.pattern("[0-9]{7}"), Validators.required]);
      this.form.controls["empID"].updateValueAndValidity();
    }
    else {
      this.form.controls["empID"].validator = Validators.compose([Validators.pattern("[0-9]{7}")]);
      this.form.controls["empID"].updateValueAndValidity();
    }
  }
}

У моєму випадку у мене завжди була перевірка шаблону, прив'язана до елемента керування, тому validatorзавжди встановлено щось, але я думаю, що ви можете встановити значення " validatornull", якщо у вас немає будь-якої перевірки, пов'язаної з елементом управління.

ОНОВЛЕННЯ: Існують і інші способи зйомки зміни моделі, як-от (ngModelChange)=changeFunctionName($event)або підписка на керування змінами значення за допомогоюthis.form.controls["employee"].valueChanges.subscribe(data => ...))

Я спробував більшість цих відповідей, але жодна з них не працювала на мене. Тут я знайшов робочий приклад https://scotch.io/@ibrahimalsurkhi/match-password-validation-with-angular-2

equalToШукав це також і закінчив, використовуючи пакет ng2-валідації ( https://www.npmjs.com/package/ng2-validation )

Ось приклад: керований шаблон:

<input type="password" ngModel name="password" #password="ngModel" required/>
<p *ngIf="password.errors?.required">required error</p>
<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/>
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

Керована модель:

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.equalTo(password));

this.form = new FormGroup({
  password: password,
  certainPassword: certainPassword
});

Шаблон:

<form [formGroup]="form">
  <input type="password" formControlName="password"/>
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword"/>
  <p *ngIf="form.controls.certainPassword.errors?.equalTo">equalTo error</p>
</form>

Ось моя версія, яку я використав для того, щоб вік в одному полі був більшим або рівним віку в іншому полі. Я також використовую групи форм, тому я використовую group.getфункцію, а неgroup.controls[]

import { FormGroup } from '@angular/forms';

export function greaterThanOrEqualTo(sourceKey: string, targetKey: string) {
    return (group: FormGroup) => {
        let sourceInput = group.get(sourceKey);
        let targetInput = group.get(targetKey);

        console.log(sourceInput);
        console.log(targetInput);

        if (targetInput.value < sourceInput.value) {
            return targetInput.setErrors({ notGreaterThanOrEqualTo: true })
        }
    }
}

І в компоненті:

    this.form = this._fb.group({

        clientDetails: this._fb.group({
            currentAge: ['', [Validators.required, Validators.pattern('^((1[89])|([2-9][0-9])|100)$')]],
            expectedRetirementAge: ['', [Validators.required]]
        }),

    },
    {
        validator: greaterThanOrEqualTo('clientDetails.currentAge', 'clientDetails.expectedRetirementAge')
    });

Я думаю, що найкраще, на сьогодні, створити формувальну групу для контролю. Коли ви екземпляруєте свій Контроль, перейдіть у функцію для його перевірки. приклад:

    this.password = new Control('', Validators.required);
    let x = this.password;
    this.confirm = new Control('', function(c: Control){
        if(typeof c.value === 'undefined' || c.value == "") return {required: "password required"};
        if(c.value !== x.value)
            return {error: "password mismatch"};
        return null;
    });

я знаю, що це сильно залежить від версії angularjs2, яку ви працюєте. Це було протестовано проти 2.0.0-альфа.46

Якщо хтось має кращі пропозиції, такі як написання спеціального валідатора (що може бути найкращим способом), це вітається.

EDIT

ви також можете використовувати ControlGroup і повністю перевірити цю групу.

this.formGroup = new ControlGroup({}, function(c: ControlGroup){
        var pass: Control = <Control>c.controls["password"];
        var conf: Control = <Control>c.controls["confirm"];
        pass.setErrors(null, true);
        if(pass.value != null && pass.value != ""){
            if(conf.value != pass.value){
                pass.setErrors({error: "invalid"}, true);
                return {error: "error"};
            }
        }
        return null;
    });

Просто відредагуйте повідомлення відповідно до вашого домену.

Відповідь Луї Круза мені дуже допомогла.

Для завершення просто додайте в інше скидання setErrors: return passwordConfirmationInput.setErrors (null);

І все працює чудово!

Дякую тобі,

З повагою,

TGA

Кутовий 8 Приклад перевірки в полі підтвердження пароля

FYI: це не оновить перевірку в полі passwordConfirm, якщо головне поле "пароль" буде змінено після проходження цієї перевірки. Але ви можете визнати недійсним поле для підтвердження пароля, коли користувач вводить його в поле пароля

<input
  type="password"
  formControlName="password"
  (input)="registerForm.get('passwordConfirm').setErrors({'passwordMatches': true})"
/>

register.component.ts

import { PasswordConfirmValidator } from './password-confirm-validator';

export class RegisterComponent implements OnInit {
  registerForm: FormGroup = this.createRegisterForm({
    username: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [
      Validators.required,
      Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'),
      Validators.minLength(8)
    ]),
    passwordConfirm: new FormControl('', [
      Validators.required,
      PasswordConfirmValidator //custom validator
    ])
  });
}

підтвердження паролем-validator.ts

import { AbstractControl } from '@angular/forms';

export function PasswordConfirmValidator(control: AbstractControl) {
  if(void 0 === control){ return null; }
  if(
    void 0 !== control.parent &&
    void 0 !== control.parent.controls &&
    void 0 !== control.parent.controls['password'] &&
    control.parent.controls['password'].value === control.value
  ){
    return null;
  }
  return {passwordMatches: true};
}

register.component.html

{{registerForm.get('passwordConfirm').hasError('passwordMatches')}}

Я б запропонував використовувати бібліотеку ng-form-rules. Це дивовижна бібліотека для створення всіх різних видів форм з логікою перевірки, відокремленою від компонента, і це може залежати від зміни значень інших областей форми. Вони мають чудову документацію , приклади та відео, які демонструють купу її функціональності . Здійснення валідації, як це те, що ви намагаєтеся зробити, є банальним.

Ви можете ознайомитися з їх README для отримання інформації про високий рівень та базового прикладу.

Кутовий 4 правила підтвердження відповідності пароля.

Якщо вам потрібні поля управління помилками, ви можете це зробити.

createForm() {
    this.ngForm = this.fb.group({
       'first_name': ["", Validators.required ],
       'last_name' : ["", Validators.compose([Validators.required, Validators.minLength(3)]) ],
       'status' : ['active', Validators.compose([Validators.required])],
       'phone':[null],
       'gender':['male'],
       'address':[''],
       'email':['', Validators.compose([
          Validators.required, 
          Validators.email])],
       'password':['', Validators.compose([Validators.required])],
       'confirm_password':['', Validators.compose([Validators.required])]
    }, {validator: this.matchingPassword('password', 'confirm_password')});
  }

Тоді вам потрібно декларувати цей метод у constructorметоді Like as.

constructor(
    private fb: FormBuilder

    ) {
    this.createForm();
  }

Замість встановлення помилки на ControlGroup, зробіть це у фактичному полі так:

    matchingPassword(passwordKey: string, confirmPasswordKey: string) {
  return (group: FormGroup): {[key: string]: any} => {
    let password = group.controls[passwordKey];
    let confirm_password = group.controls[confirmPasswordKey];

    if (password.value !== confirm_password.value) {
      return {        
        mismatchedPasswords: true
      };
    }
  }
}

Частина HTML для групи паролів

<form [formGroup]="ngForm" (ngSubmit)="ngSubmit()">
    <div class="form-group">
            <label class="control-label" for="inputBasicPassword"> Password <span class="text-danger">*</span></label>
                <input type="password" class="form-control" formControlName="password" placeholder="Password" name="password" required>
                <div class="alert text-danger" *ngIf="!ngForm.controls['password'].valid && ngForm.controls['password'].touched">This Field is Required.</div>
            </div>
            {{ngForm.value.password | json}}
            <div class="form-group">
            <label class="control-label" for="inputBasicPassword">Confirm Password <span class="text-danger">*</span></label>
                <input type="password" class="form-control" name="confirm_password" formControlName="confirm_password" placeholder="Confirm Password" match-password="password">

    <div class='alert text-danger' *ngIf="ngForm.controls.confirm_password.touched && ngForm.hasError('mismatchedPasswords')">
              Passwords doesn't match.
      </div>
    </div>
<button type="submit" [disabled]="!ngForm.valid" class="btn btn-primary ladda-button" data-plugin="ladda" data-style="expand-left" disabled="disabled"><span class="ladda-label">
            <i class="fa fa-save"></i>  Create an account
        <span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div>
        </span><span class="ladda-spinner"></span></button>
</form>