Блог

Я использую Angular 2 последней версии. Я пытаюсь проверить, совпадают ли пароль в поле пароля и подтверждение пароля. Или, если оба поля совпадают. Вот что я делал до сих пор, но, похоже, это не работает.

Любая помощь будет оценена.

Signup.component.ts

 import { Component, OnInit } from '@angular/core';
import {Validators, FormGroup, FormBuilder } from "@angular/forms";

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {
  }
  onSignup() {
    console.log("Logged in");
  }

  ngOnInit() {
    this.myForm = this.fb.group({
      email: ['', Validators.compose([
        Validators.required,
      ])],
      password: ['', Validators.compose([
          Validators.required,
      ])],
      confirmPassword: ['', Validators.compose([
        Validators.required,

      ])],
    });
  }
}
  

Signup.component.html

 <div class="container">
  <form [formGroup]="myForm" novalidate (ngSubmit)="onSignup()">
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" name="email">
      <small [hidden]="myForm.controls.email.valid || (myForm.controls.email.pristine amp;amp; !myForm.submitted)" class="text-danger">
        Email is required.
      </small>
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password" name="password" validateEqual="confirmPassword" reverse="true">
      <small [hidden]="myForm.controls.password.valid || (myForm.controls.password.pristine amp;amp; !myForm.submitted)" class="text-danger">
        Password is required
      </small>
    </div>
    <div class="form-group">
      <label for="confirmPassword">Retype password</label>
      <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" validateEqual="password" reverse="false">
      <small [hidden]="myForm.controls.confirmPassword.valid || (myForm.controls.confirmPassword.pristine amp;amp; !myForm.submitted)" class="text-danger">
        Password mismatch
      </small>
    </div>
    <button type="submit" [disabled]="!myForm.valid" class="btn btn-default">Submit</button>
  </form>
</div>
  

Validator.ts

 import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
    selector: 'validator',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
    ]
})
export class EqualValidator implements Validator {
    constructor( @Attribute('validateEqual') public validateEqual: string,
                 @Attribute('reverse') public reverse: string) {
    }
    private get isReverse() {
        if (!this.reverse) return false;
        return this.reverse === 'true' ? true: false;
    }
    validate(c: AbstractControl): { [key: string]: any } {
        // self value
        let v = c.value;
        // control vlaue
        let e = c.root.get(this.validateEqual);
        // value not equal
        if (e amp;amp; v !== e.value amp;amp; !this.isReverse) {
            return {
                validateEqual: false
            }
        }

        // value equal and reverse
        if (e amp;amp; v === e.value amp;amp; this.isReverse) {
            delete e.errors['validateEqual'];
            if (!Object.keys(e.errors).length) e.setErrors(null);
        }
        // value not equal and reverse
        if (e amp;amp; v !== e.value amp;amp; this.isReverse) {
            e.setErrors({
                validateEqual: false
            })
        }
        return null;
    }
}
  

Любая помощь будет принята с благодарностью. Спасибо!

Вот рабочий модуль, который подключается к изменению значения, чтобы напрямую отслеживать значения и устанавливать ошибки.

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

http://plnkr.co/PXcae8kq9quYFQC2x7K2

  subscribeToFormChangesAndSetValidity() {
      const myFormValueChanges$ = this.myForm.controls["passwords"].valueChanges;

      myFormValueChanges$.subscribe(x => {
          if(x.password === x.confirmPassword) {
              this.myForm.controls["passwords"].setErrors(null);
          } else {
              this.myForm.controls["passwords"].setErrors({ "notValid" : true});
          }
      });
  }

  ngOnInit() {
    this.myForm = this.fb.group({
      email: ['', Validators.required],
      passwords: this.fb.group({
        password: ['', Validators.required],
        confirmPassword: ['', Validators.required]
        })
        });

        this.subscribeToFormChangesAndSetValidity();
  }