自定義驗證器角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