角型（4）：Template-Drivenフォームのカスタムバリデーターは、後ろのフィールドの現在の値を表示します

Question

カスタムバリデーターがフィールド値より1ステップ遅れている理由はわかりません。例：私の入力フィールドは値123を1つずつ入力しています。しかし、私のバリデータは値が12です。

2つのフィールド間の値を正しく比較することはできません。 このディレクティブでバリデータです：

@Directive({ 
    selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]', 
    providers: [ 
    { 
     provide: NG_VALIDATORS, 
     useExisting: forwardRef(() => PasswordValidationDirective), 
     multi: true 
    } 
    ] 
}) 
export class PasswordValidationDirective implements Validator { 
    @Input('first') first: string; 
    @Input('second') second: string; 

    constructor() { 
    } 

    public validate(ac: AbstractControl): { [key: string]: any } { 
    console.log(ac.root); 
    return null; 
    } 
} 

これは、フィールドのHTMLです：

<md-input-container class="full-width"> 
    <input mdInput 
     type="password" 
     required 
     ngModel name="passwordConfirmation" 
     #passwordConfirmation="ngModel" 
     minlength="6" 
     maxlength="30" 
     pattern="(?=^.{6,30}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" 
     validateEqual 
     first="password" 
     second="passwordConfirmation" 
     placeholder="{{'PASSWORD_RECOVERY.PASSWORD_CONFIRMATION' | translate}}"> 
    <md-error *ngIf="passwordConfirmation.touched && passwordConfirmation.invalid"> 
    <span *ngIf="passwordConfirmation.errors.required"> 
     {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} 
    </span> 
    <span *ngIf="passwordConfirmation.errors.minlength || passwordConfirmation.errors.maxlength"> 
     {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} 
    </span> 
    <span *ngIf="passwordConfirmation.errors.pattern" class="p-md-error-multiline-div"> 
     {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} 
    </span> 
    </md-error> 
</md-input-container> 

Answer 1

は最後に解決策を見つけることができました！私はNgModelGroupに行くことにしました。ここでディレクティブがあります：

@Directive({ 
    selector: '[validateEqual][ngModelGroup]', 
    providers: [ 
    { 
     provide: NG_VALIDATORS, 
     useExisting: forwardRef(() => PasswordValidationDirective), 
     multi: true 
    } 
    ] 
}) 
export class PasswordValidationDirective implements Validator { 
    @Input('password') public password: string; 
    @Input('confirmation') public confirmation: string; 

    public validate(fg: FormGroup): { [key: string]: any } { 
    const fieldOne = fg.value[this.password]; 
    const fieldTwo = fg.value[this.confirmation]; 

    if (!fieldOne || !fieldTwo || fieldOne === fieldTwo) { 
     return null; 
    } 

    return {valueEquals: false}; 

    } 
} 

そして、ここではHTMLです：

<div ngModelGroup="passwordGroup" 
    #passwordGroup="ngModelGroup" 
    validateEqual 
    password="password" 
    confirmation="passwordConfirmation"> 
    <div class="row"> 
    <div class="col-xs-6"> 
     <md-input-container class="full-width"> 
     <input mdInput 
       type="password" 
       required 
       ngModel name="password" 
       #password="ngModel" 
       placeholder="{{'SIGNUP.PASSWORD' | translate}}"> 
     </md-input-container> 
    </div> 
    <div class="col-xs-6"> 
     <md-input-container class="full-width"> 
     <input mdInput 
       type="password" 
       required 
       ngModel name="passwordConfirmation" 
       #passwordConfirmation="ngModel" 
       placeholder="{{'SIGNUP.RETYPE_PASSWORD' | translate}}"> 
     </md-input-container> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <md-error *ngIf="passwordGroup.errors"> 
     <span class="p-text-small-error">{{'SIGNUP.MATCH' | translate}}</span> 
     </md-error> 
    </div> 
    </div> 
</div> 

ここでの重要な部分は、あなたの好みに合わせて変更することができディレクティブ自体と入ってくるパラメータです。