я реализовал пользовательский валидатор соответствия паролей для Angular 4.

помимо проверки соответствия двух значений, он также подписывается на изменения из другого элемента управления и повторно проверяет, когда один из двух элементов управления обновляется. Не стесняйтесь использовать его в качестве эталона для собственной реализации или просто скопировать его напрямую.

вот ссылка на решение: https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30.

---

и вот я предоставляю копию кода:

match-other-validator.ТС

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-валидаторы.

нашел гораздо более простое решение. Не уверен, если это правильный способ сделать это, но это работает для меня

<!-- PASSWORD -->
<ion-item [ngClass]="{'has-error': !signupForm.controls.password.valid && signupForm.controls.password.dirty}">
    <ion-input formControlName="password" type="password" placeholder="{{ 'SIGNUP.PASSWORD' | translate }}" [(ngModel)]="registerCredentials.password"></ion-input>
</ion-item>

<!-- VERIFY PASSWORD -->
<ion-item [ngClass]="{'has-error': !signupForm.controls.verify.valid && signupForm.controls.verify.dirty}">
       <ion-input formControlName="verify" [(ngModel)]="registerCredentials.verify" type="password" pattern="{{registerCredentials.password}}" placeholder="{{ 'SIGNUP.VERIFY' | translate }}"> </ion-input>
</ion-item>

посмотреть

pattern="{{registerCredentials.password}}"

угловое решение 4.3.3!

вы можете сделать это с помощью: [formGroup],formGroupName,formControlName в html и new FormGroup,new FormControl и custom areEqual метод в TS

Рег.деталь.HTML-код

<div [formGroup]="userFormPassword">
  <div>
    <input formControlName="current_password" type="password" placeholder="Current Password">
  </div>

  <div formGroupName="passwords">
    <input formControlName="new_password" type="password" placeholder="New Password">
  </div>

  <div formGroupName="passwords">
    <input formControlName="repeat_new_password" type="password" class="form-control" placeholder="Repeat New Password">
    <div class="input-error" *ngIf="
          userFormPassword.controls['passwords'].errors &&
          userFormPassword.controls['passwords'].errors.areEqual &&
          userFormPassword.controls['passwords'].controls.repeat_new_password.touched &&
          userFormPassword.controls['passwords'].controls.new_password.touched
        ">PASSWORDS do not match
    </div>
  </div>
</div>

Рег.деталь.ТС

export class HomeHeaderSettingsModalComponent implements OnInit {
  userFormPassword: FormGroup;
  // ...

  static areEqual(c: AbstractControl): ValidationErrors | null {
    const keys: string[] = Object.keys(c.value);
    for (const i in keys) {
      if (i !== '0' && c.value[ keys[ +i - 1 ] ] !== c.value[ keys[ i ] ]) {
        return { areEqual: true };
      }
    }
  }

  ngOnInit() {
    this.userFormPassword = new FormGroup({
      'current_password': new FormControl(this.user.current_password, [
        Validators.required,
      ]),
      'passwords': new FormGroup({
        'new_password': new FormControl(this.user.new_password, [
          Validators.required
        ]),
        'repeat_new_password': new FormControl(this.user.repeat_new_password, [
          Validators.required
        ])
      }, HomeHeaderSettingsModalComponent.areEqual)
    });
  }
}

результат:

Если вы используете RC.5 и не можете найти контроль, вы можете попробовать использовать FormGroup. Вы можете узнать больше из моего ответа:

угловой 2 RC.5 проверка формы для повторения пароля

С помощью этой библиотеки ng2-validation-manager вы можете легко сделать это:

this.form = new ValidationManager({
  'password'    : 'required|rangeLength:8,50',
  'repassword'  : 'required|equalTo:password'
});

кроме того, начиная с angular 2 rc4 с формами 0.2.0 разметка и атрибут, вызывающий имя группы, используемое для охвата сгруппированных входов, необходимы для предотвращения ошибок

<div formGroupName="passwords">group input fields here... </div>

сохранить пароль в переменной экземпляра.

    password = new FormControl('', [Validators.required]);

затем используйте его в своей группе форм.

        this.registrationForm = this.fb.group({
        'email': ['', [
            Validators.required,
            NGValidators.isEmail,
        ]
        ],
        'password': this.password,
        'password2': ['', [Validators.required, this.passwordMatch]]
    });

таким образом, функция выглядит следующим образом.

 private passwordMatch() {
        let that = this;
        return (c: FormControl) =>
        {
            return (c.value == that.password.value) ? null : {'passwordMatch': {valid: false}};
        }
    }

Я знаю, что это не лучшее решение, но работает!

Ну, я искал ответ на эту тему и все были слишком велики для моей лени, поэтому я сделал ее такой. Я думаю, что он хорошо справляется с работой.

я использовал ngModel для привязки пароля и ввода repeatPassword, а затем я показали или скрыли div с сообщением сравнения паролей с [скрытый] атрибут в угловой 2.

   <label for="usr">Password</label>
   <input placeholder="12345" id="password" type="text" class="form-control" 
   [(ngModel)]="password">
   <label for="usr">Repeat pasword</label> 
   <input placeholder="12345" type="text" class="form-control" 
   [(ngModel)]="repeatPassword">
   <div [hidden]="password == repeatPassword">Passwords do not match!</div>

Я нашел решение, которое сделало меня счастливее, насколько соответствие кода обработки ошибок:

1-й: создайте пользовательский класс проверки со статическим методом, который выполняет проверку

этот метод должен иметь параметр AbstractControl, который угловой вводит

обратите внимание, что вы передадите это в элементе управления ConfirmPassword, поэтому вам нужно вызвать parent, чтобы добраться до FormGroup. Оттуда вы вызываете formGroup.get ('myControl') и получить элементы управления для пароль и подтверждение, как вы назвали их при создании группы форм.

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

export class PasswordValidation {

    static MatchPassword(AC: AbstractControl) {
       const formGroup = AC.parent;
       if (formGroup) {
            const passwordControl = formGroup.get('Password'); // to get value in input tag
            const confirmPasswordControl = formGroup.get('Confirm'); // to get value in input tag

            if (passwordControl && confirmPasswordControl) {
                const password = passwordControl.value;
                const confirmPassword = confirmPasswordControl.value;
                if (password !== confirmPassword) { 
                    return { matchPassword: true };
                } else {
                    return null;
                }
            }
       }

       return null;
    }
}

2-й: используйте валидатор клиента так же, как вы используете angulars

this.registerForm = this.fb.group({ // <-- the parent FormGroup
                Email: ['', Validators.required ],
                Username: ['', Validators.required ],
                FirstName: ['', Validators.required ],
                Password: ['',
                                [
                                    Validators.required,
                                    Validators.minLength(6)
                                ]
                          ],
                Confirm: ['',
                                [
                                    Validators.required,
                                    PasswordValidation.MatchPassword
                                ]
                          ]
                });

Angular затем добавит "matchPassword": true для ваших ошибок подтверждения элементов управления точно так же, как он добавит "required" true при отсутствии значения

резюме

• проверка триггера при каждом изменении значения другого элемента управления.
• отпишитесь, чтобы избежать утечки памяти
• возвращение {match: true} позволит нам проверить, если данный элемент управления имеет ошибку с помощью myControl.hasError('match')

реализация

import { AbstractControl, ValidatorFn } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';

export function matchOtherValidator(otherControlName: string): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        const otherControl: AbstractControl = control.root.get(otherControlName);

        if (otherControl) {
            const subscription: Subscription = otherControl
                .valueChanges
                .subscribe(() => {
                    control.updateValueAndValidity();
                    subscription.unsubscribe();
                });
        }

        return (otherControl && control.value !== otherControl.value) ? {match: true} : null;
    };
}

пример

this.registerForm = formBuilder.group({
            email: ['', [
                Validators.required, Validators.email
            ]],
            password: ['', [
                Validators.required, Validators.minLength(8)
            ]],
            confirmPassword: ['', [
                Validators.required, matchOtherValidator('password')
            ]]
        });

мое решение для углового 4.3.4, которое не требует дополнительных FormGroup:

• зарегистрировать пользовательский валидатор для repeatedPassword проверка совпадения паролей
• подписаться обработчик на password.valueChanges во время создания формы, и вызов .updateValueAndValidity() method on repeatedPassword

вот код:

form: FormGroup
passwordFieldName = 'password'
repeatedPasswordFieldName = 'repeatedPassword'

createForm() {
  this.form = this.formBuilder.group({
    login: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(255), Validators.email]],
    [passwordFieldName]: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(255)]],
    [repeatedPasswordFieldName]: ['', [Validators.required, this.samePassword]]
  });

  this.form
    .get(passwordFieldName)
    .valueChanges.subscribe(() => {
      this.form
        .get(repeatedPasswordFieldName).updateValueAndValidity();
    })
}

samePassword(control: FormControl) {
  if (!control || !control.parent) {
    return null;
  }
  if (control.value !== control.parent.get(passwordFieldName).value) {
    return {'passwordMismatch': true}
  }
  return null;
}

Я просто хочу опубликовать свое решение:

this.authorizationSettings = formBuilder.group({
      currentPassword: [null, Validators.compose([Validators.required, Validators.minLength(8)])],
      newPassword: [null, Validators.compose([Validators.required, Validators.minLength(8)])],
      repeatNewPassword: [null]
    });
    this.authorizationSettings.controls.newPassword.valueChanges.subscribe(data => {
      if (data) {
        data = data.replace(/[|\{}()[\]^$+*?.]/g, '\$&');
      }
      this.authorizationSettings.controls.repeatNewPassword
        .clearValidators();
      this.authorizationSettings.controls.repeatNewPassword
        .setValidators(Validators.compose([Validators.required, Validators.pattern(data)]));
    });

сначала нам нужно создать группу форм, а затем Подписаться на первое новое поле пароля, а затем добавить проверку для повторения поля.

вот мой способ использования угловых валидаторов

компоненты:

import { UserModel } from '../../settings/users/user.model';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormRequestModel } from '../Shared/form.model';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.scss']
})
export class AddUserComponent implements OnInit {

  passwordsForm: FormGroup;
  user: UserModel;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {

      this.passwordsForm = this.fb.group({
        inputPassword: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(50)])],
        inputPasswordAgain: ['']
      });

  }
}

HTML:

 <form class="form-horizontal" [formGroup]="passwordsForm" novalidate>
   <div class="form-group">
    <br/>
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" formControlName="inputPassword" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
   <div class="alert alert-danger" *ngIf="!passwordsForm.controls['inputPassword'].valid && passwordsForm.controls['inputPassword'].touched">Password must contain at least 6 characters!!</div>


  <div class="form-group">
    <br/>
    <label for="inputPasswordAgain" class="col-sm-2 control-label">Password again</label>
    <div class="col-sm-10">
      <input type="password" formControlName="inputPasswordAgain" class="form-control" id="inputPasswordAgain" placeholder="Password again">
    </div>
  </div>

  <!-- Show div warning element if both inputs does not match the validation rules below -->

   <div class="alert alert-danger" *ngIf="passwordsForm.controls['inputPasswordAgain'].touched
   && passwordsForm.controls['inputPasswordAgain'].value !== passwordsForm.controls['inputPassword'].value">
   Both passwords must be equal!</div>

Если вы хотите создать директиву и использовать его потом посмотреть этот

вот полный код директивы

import { Directive, Attribute  } from '@angular/core';
import { Validator,  NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[advs-compare]',
  providers: [{provide: NG_VALIDATORS, useExisting: CompareDirective, multi: true}]
})
export class CompareDirective implements Validator {

  constructor(@Attribute('advs-compare') public comparer: string){}

  validate(c: Control): {[key: string]: any} {
    let e = c.root.get(this.comparer);
    if(e && c.value !== e.value){
      return {"compare": true};
    }
    return null;
  }
}

для получения дополнительной информации о его использовании см. http://www.advancesharp.com/blog/1226/angular-5-email-compare-password-validation-different-ways

только начинаю с углового и я нашел это решение, не знаю, если это хорошая практика ты:

  // Custom password confirmation validation
  static matchFieldValidator(fieldToMatch:string) : ValidatorFn {
    return (control : AbstractControl) : { [key: string]: any;} => {
      let confirmField = control.root.get(fieldToMatch);

      return (confirmField && control.value !== confirmField.value) ? {match:false} : null;
    }
  }

таким образом, вы можете просто сделать что-то подобное при создании правила проверки

  this.registrationForm = fb.group({
    ...
    password1 : ['', [Validators.minLength(3)]],
    // remember to replace RegisterComponent with YOUR class name
    password2 : ['', [RegisterComponent.matchFieldValidator('password1')]], 
  });

это самый простой способ, которым я следую.Я удалил код, который не имеет отношения.

Я думаю, что это поможет вы.

auth.деталь.ТС,авт.деталь.html, auth.деталь.css

import { Component, OnInit, EventEmitter, Input, Output ,Directive, forwardRef, Attribute,OnChanges, SimpleChanges} from '@angular/core';
import { NG_VALIDATORS,Validator,Validators,AbstractControl,ValidatorFn  } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

import { RegisterUser } from '../shared/models';

@Component({
  moduleId: module.id,
  selector: 'auth-page',
  styleUrls: ['./auth.component.css'],
  templateUrl: './auth.component.html'
})

export class AuthComponent implements OnInit {
  userRegisterModel: RegisterUser = new RegisterUser();
    
    constructor(private route: ActivatedRoute, private router: Router) {   }
  
  ngOnInit() { 
    this.userRegisterModel.LoginSource = 'M';//Manual,Facebook,Google
}

  userRegister() {
  console.log(this.userRegisterModel);
  }

}

.validation
{
  margin:0;
  padding-top: 1px;
  padding-bottom: 0px;
}
.validation .message
{
    font-size: 10px;
    color: #de1a16;
}

           <form (ngSubmit)="userRegister()" #authRegisterForm="ngForm" novalidate>

                            <div class="col-md-6 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
                                <label>First Name:</label>
                                <input type="text" class="form-control" required pattern="[a-zA-Z][a-zA-Z ]+" [(ngModel)]="userRegisterModel.firstName" name="firstName"
                                    #firstName="ngModel" placeholder="Your first name">
                                <div style="display: flex;">&nbsp;
                                    <div [hidden]="firstName.valid || firstName.pristine" class="validation">
                                        <div [hidden]="!firstName.hasError('required')" class="message">Name is required</div>
                                        <div [hidden]="!firstName.hasError('pattern')" class="message">Only alphabets allowed</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
                                <label>Last Name:</label>

                                <input type="text" class="form-control" required pattern="[a-zA-Z][a-zA-Z ]+" [(ngModel)]="userRegisterModel.lastName" name="lastName"
                                    #lastName="ngModel" placeholder="Your last name">


                                <div style="display: flex;">&nbsp;
                                    <div [hidden]="lastName.valid || lastName.pristine" class="validation">
                                        <div [hidden]="!lastName.hasError('required')" class="message">Name is required</div>
                                        <div [hidden]="!lastName.hasError('pattern')" class="message">Only alphabets allowed</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
                                <label>Email:</label>

                                <input type="text" class="form-control" required [(ngModel)]="userRegisterModel.email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
                                    #email="ngModel" placeholder="Your email">

                                <div style="display: flex;">&nbsp;
                                    <div [hidden]="email.valid || email.pristine" class="validation">
                                        <div [hidden]="!email.hasError('required')" class="message">Email is required</div>
                                        <div [hidden]="!email.hasError('pattern')" class="message">Email format should be
                                            <small>
                                                <b>[email protected]</b>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
                                <label>Password:</label>
                                <input type="password" class="form-control" required [(ngModel)]="userRegisterModel.password" name="password" #password="ngModel"
                                    minlength="6" placeholder="Your strong password" >

                                <div style="display: flex;">&nbsp;
                                    <div [hidden]="password.valid || password.pristine" class="validation">
                                        <div [hidden]="!password.hasError('minlength')" class="message">Password should be 6digit</div>
                                        <div [hidden]="!password.hasError('required')" class="message">Password is required</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 form-group" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
                                <label>Confirm Password:</label>
                                <input type="password" class="form-control" required validateEqual="password" [(ngModel)]="userRegisterModel.confirmPassword"
                                    name="confirmPassword" #confirmPassword="ngModel" placeholder="Confirm your password">

                                <div style="display: flex;">&nbsp;
                                    <div [hidden]="confirmPassword.valid || confirmPassword.pristine" class="validation">
                                        <div class="message">Passwords did not match</div>
                                    </div>
                                </div>
                            </div>

               
                            

                            <div class="col-md-12 form-group text-right" style="padding-right: 5px;padding-left: 0px;margin-bottom: 0;">
                                <button type="submit" class="btn btn-primary" [disabled]="!authRegisterForm.form.valid">
                                    Submit form
                                    <i class="icon-arrow-right14 position-right"></i>
                                </button>
                            </div>
                        </form>

registerUser.моцель.ТС

export class RegisterUser {
    FirstName : number;
    LastName : string;
    Email: string;
    Password : string;  
  }      

пароль.спичка.директива.ТС

import { Directive, forwardRef, Attribute } from '@angular/core';
import { NG_VALIDATORS,Validator,Validators,AbstractControl,ValidatorFn } from '@angular/forms';

@Directive({
    selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
    ]
})
export class EqualValidator implements Validator {
    constructor( @Attribute('validateEqual') public validateEqual: string) {}

    validate(c: AbstractControl): { [key: string]: any } {
        // self value (e.g. retype password)
        let v = c.value;

        // control value (e.g. password)
        let e = c.root.get(this.validateEqual);

        // value not equal
        if (e && v !== e.value) return {
            validateEqual: false
        }
        return null;
    }
}

приложение.модуль.ТС

import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

//import { AppRoutingModule } from './app-routing.module';
//import { AppComponent } from './app.component';

//shared components
import {  EqualValidator} from './shared/password.match.directive';

@NgModule({
  declarations: [
   // AppComponent,
    //FooterComponent,
   // HeaderComponent,
   // LoginComponent,
   // LayoutComponent,
   // AuthComponent,
   // UserExistComponent,
  //  HomeComponent,
    EqualValidator
  ],
  imports: [
  // BrowserModule,    
  //  AppRoutingModule,
  //  SharedModule   
  ],
  providers: [
   // ApiService,
   // AuthGuard,
    //JwtService,  
   // UserService,
   // HomeAuthResolver,
   // NoAuthGuard,
   // SharedService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Я не думаю, что нам нужен пользовательский валидатор для подбора паролей, это может быть легко достигнуто с помощью formname.controls['controlName'].value.

<input type="password" class="form-control" formControlName="password">
<div class="alert alert-danger" *ngIf="!userForm.controls['password'].valid && userForm.controls['password'].touched">
    Enter valid password between 7 and 14 characters.
</div>
<input type="password" class="form-control" formControlName="confPassword">
<div *ngIf="userForm.controls['confPassword'].touched">
    <div class="alert alert-danger" *ngIf="userForm.controls['confPassword'].value != userForm.controls['password'].value">
        Password do not match
    </div>
</div>

на fileName.component.ts элемент управления формой объявлен как:

'password':[null,  Validators.compose([Validators.required, Validators.minLength(7), Validators.maxLength(14))],
  'confPassword':[null, Validators.required]

отвечая на вопрос Чжоу Хао, который поднял вопрос о дебатах, я думаю, что это то, что вы искали, потому что это случилось со мной так же, как и вы, он сказал, что переменная была неопределенной и решить ее следующим образом:

  static comparePassword(control) {  
    try {
      control.parent.value.password;
      if (control.parent.value.password == control.value) {
        return null;
      } else {
          return { 'invalidValue': true }; 
      }
   } catch (e) {
      e.message;
   }
 }