Angular 5下的自定义验证（密码检查）未执行

Question

我正在尝试为Angular 5 Template表单创建自定义密码验证器。常规验证（例如required，maxlength等）正在运行，但自定义验证代码不起作用。

据我所见，文件 apxPaswordcheck.ts 中的validator代码未被执行。我已将console.log个打印语句放在自定义验证码 apxPaswordcheck.ts 中，但似乎没有打印。

我该怎么做才能解决问题？

TIA

当前的Angular版本

OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.23
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.13
typescript: 2.4.2
webpack: 3.10.0

目录设置

apxPasswordcheck.ts

import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, ValidatorFn, Validator, FormControl, FormGroup } from '@angular/forms';

// validation function
function validateApxPasswordCheckFactory() : ValidatorFn {

    console.log("TEST -> got in to the area");
    return (group: FormGroup) => {

    let pass = group.controls.password.value;
    console.log("TEST -> PASS " + pass);

    let confirmPass = group.controls.passwordconf.value;
    console.log("TEST -> CONFIRMPASS " + confirmPass);

    let isValid = pass === confirmPass;

    if (isValid) {
        return null;
      } else {
        return {
          apxPasswordcheck: {
            valid: false
          }
        };
      }
    }    
  }

@Directive({
  selector: '[apxPasswordcheck][ngModel]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: ApxPasswordCheckValidator, multi: true }
  ]
})

export class ApxPasswordCheckValidator implements Validator {
  validator: ValidatorFn;

  constructor() {
    this.validator = validateApxPasswordCheckFactory();
  }

  validate(c: FormControl) {
    return this.validator(c);
  }

}

密码区域为admin-register-form.component.html

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">

    <!-- set up password -->
    <div class="form-group">
      <div class="input">
        <label>Password</label>
        <input type="password" [(ngModel)]="password" id="password" class="form-control input-lg" name="password" #userPassword="ngModel"
          [ngClass]="{'is-invalid' : userPassword.errors && userPassword.touched }" minlength="8" tabindex="1"
          required apxPasswordcheck>
        <div class="invalid-feedback">
          Password must be at least 8 characters long
        </div>
      </div>
    </div>
  </div>


  <div class="col-xs-12 col-sm-6 col-md-6">

    <!-- set up password confirmation -->
    <div class="form-group">
      <div class="input">
        <label>Password Confirmation</label>
        <input type="password" [(ngModel)]="passwordconf" id="passwordconf" class="form-control input-lg" name="passwordconf" #userPasswordconf="ngModel"
          [ngClass]="{'is-invalid' : userPasswordconf.errors && userPasswordconf.touched }" minlength="8" tabindex="1"
          required apxPasswordcheck>
        <div class="invalid-feedback">
          Password confirmation is not equal to the Password
        </div>

        <p *ngIf="userPasswordconf.apxPasswordcheck && userPasswordconf.touched">
          Password and CONFIRMATION must be the same
        </p>

      </div>
    </div>
  </div>
</div>

管理寄存器-form.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ElementRef } from '@angular/core/src/linker/element_ref';

import { ApxPasswordCheckValidator } from '../../../apxPaswordcheck';

@Component({
  selector: 'app-admin-register-form',
  templateUrl: './admin-register-form.component.html',
  styleUrls: ['./admin-register-form.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AdminRegisterFormComponent implements OnInit {

  firstname = '';
  lastname = '';
  email = '';
  username = '';
  password = '';
  passwordconf = '';

  constructor() { }

  ngOnInit() {

  }


  ngAfterViewInit() {
    document.getElementById('preloader').classList.add('hide');
  }


  onSubmit(form: ElementRef) {
    console.log("form was submitted");
    console.log(form);
  }
}