Confirm Password validation using angular attribute directive not working


#1

my login html

  <StackLayout class="input-field">
                <TextField #password="ngModel" class="input" hbMinlength="5" reverse="true"
                hint="Password" secure="true" required [(ngModel)]="creds.password" 
                [returnKeyType]="isLoggingIn ? 'done' : 'next'"></TextField>
                <StackLayout class="hr-light"></StackLayout>
            </StackLayout>
    
            <StackLayout *ngIf="!isLoggingIn" class="input-field">
                <TextField #confirmPassword="ngModel" [required]="!isLoggingIn" class="input" 
                [(ngModel)]="confirmPasswordText" hint="Confirm password" 
                 required compare="password" secure="true" returnKeyType="done"></TextField>
                <StackLayout class="hr-light"></StackLayout>
            </StackLayout>
@Directive({
    selector: '[compare]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
    ]
})
export class EqualValidator implements Validator {

    constructor(@Attribute('compare') 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 && v !== e.value && !this.isReverse) {
          return {
            validateEqual: false
          }
        }
     
        return null;
    }
}
  • so c.root.get(this.control) - should give me another control from the form - but instead returns null.

If there any other way to query elements from the form?