Question

我为Angular2 Forms编写了一个自定义验证器。它只是将输入与黑名单进行比较，到目前为止工作正常。有一个例外：如果在完成表单验证后更新黑名单，则在输入字段更改之前不会再次验证表单。为了解决这个问题，我在组件中获取模板变量并手动触发更新。

@ViewChild('email') emailNgModel: NgModel;
...
this.emailBlacklist = this.emailBlacklist.concat(email);
        let sub = this.zone.onStable.asObservable().subscribe(() => {
          if (sub) sub.unsubscribe();
          this.zone.run(() => {
            this.emailNgModel.control.updateValueAndValidity();
          });
        });

我更倾向于听取我的指令中的更改并从那里触发更新（参见下面的TODO）

export const BLACKLIST_VALIDATOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => BlacklistValidatorDirective),
  multi: true
};

@Directive({
  selector: '[validateBlacklist][formControlName],[validateBlacklist][formControl],[validateBlacklist][ngModel]',
  providers: [BLACKLIST_VALIDATOR]
})
export class BlacklistValidatorDirective implements Validator, OnChanges {
  @Input('validateBlacklist') blacklist;

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if ('blacklist' in changes) {
      // TODO trigger ngModel.control.updateValueAndValidity()
    }
  }

  validate(c: AbstractControl): {[p: string]: any} {
    return validateBlacklist(this.blacklist, c.value);
  }

}

export function validateBlacklist(blacklist: string[], value) {
  if (blacklist && blacklist.indexOf(value) >= 0) {
    return {
      blacklist: true
    };
  }
  return null;
}

现在问题是，如何从主机获取ngModel？或者我如何在一般的同一主机上获得其他指令？

Answer 1

注射它

constructor(private ngModel:NgModel) {

我很确定这会完全符合您的要求。

从属性指令访问其他属性指令

1 个答案: