自定义验证器角4

Question

我在我的Angular 4项目中使用自定义验证器时，当我想更改密码我有一个弹出式2字段：密码和confirmpassword。 在这种情况下，这两个字段都是必需的，当用户删除某些字段的内容时，正确显示错误消息，字段变为红色。 但我怎么能进行实地无效的，如果密码不匹配（使红色字段等所需用NG-无效/有错误）

equalValidator.ts

import {Directive, forwardRef, Attribute} from '@angular/core'; 
import {Validator, AbstractControl, NG_VALIDATORS} 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, 
    @Attribute('reverse') public reverse: string) { 

    console.log('Sono in validator') 
    } 

    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 && v !== e.value && !this.isReverse) { 
     return { 
     validateEqual: false 
     } 
    } 

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

    // value not equal and reverse 
    if (e && v !== e.value && this.isReverse) { 
     e.setErrors({ 
     validateEqual: false 
     }) 
    } 

    return null; 
    } 
} 

password.html

<form #modelForm="ngForm"> <div class="form-group"> 
     <label for="">Password</label> 
     <input type="password" class="form-control" name="password" [ngModel]="password" 
     required validateEqual="confirmPassword" reverse="true" #password="ngModel"> 
     <small [hidden]="password.valid || password.pristine" class="text-danger"> 
     Password is required 
     </small> 

    </div> 
    <div class="form-group"> 
     <label for="">Retype password</label> 
     <input type="password" class="form-control" name="confirmPassword" [ngModel]="confirmPassword" 
     required validateEqual="password" reverse="false" #confirmPassword="ngModel"> 
     <small [hidden]="confirmPassword.valid || confirmPassword.pristine " class="text-danger"> 
     Password mismatch 
     </small> 

    </div> </form> <p-footer> <div class="ui-dialog-buttonpane ui-helper-clearfix"> <button class="btn btn-success"   (click)="updatePassword(modelForm, oldPassword.value, password.value, confirmPassword.value)"  [disabled]="((modelForm.form.invalid || modelForm.form.pristine)|| (password.value != confirmPassword.value))">   <span class="btn-label"> <i class="material-icons">check</i>  </span> {{'changepassword.buttons.update' |translate }}  </button> </div> 

Answer 1

使用反应形式

this.passwordForm = this.fb.group({ 
    password: [ '', [ Validators.required] ], 
    passwordConfirm: [ '', Validators.required ] 
}, { validator: this.areEqual }); 

这是我如何创建FormGroup。

private areEqual(group: FormGroup) { 
    return group.get('password').value === group.get('passwordConfirm').value ? null : { mismatch: true }; 
} 

这是如何验证匹配

，然后在模板你可以使用

passwordForm?.errors?.mismatch 

希望这将有助于

Answer 2

你可以使用ngClass添加引导has-danger类对于引导程序4，或者对于以前版本为has-error，基于验证期间设置的属性。

我已经简化您的一些代码，以使实现更清晰：

<div class="form-group" [ngClass]="{'has-danger': passwordError}"> 
    <label class="form-control-label">danger</label> 
    <input type="password" class="form-control" name="password" 
    required validateEqual="confirmPassword" reverse="true"> 
    </div> 

这里的工作plunkr全面实施：https://plnkr.co/edit/MbrFdbd8SVjAhQp3XOOY