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

标签 angular angular2-forms angular2-directives

我已经为 Angular2 Forms 编写了一个自定义验证器。 它只是将输入与黑名单进行比较,到目前为止效果很好。 除了一个异常(exception):如果黑名单在表单验证完成后更新,则在输入字段更改之前不会再次验证表单。 为了解决这个问题,我在我的组件中获取模板变量并手动触发更新。

@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?或者我一般如何在同一主机上获取其他指令?

最佳答案

直接注入(inject)

constructor(private ngModel:NgModel) {

我很确定这会完全满足您的要求。

关于angular - 从属性指令访问其他属性指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41986840/

相关文章:

css - CSS 中的 Angular Material 2 目标元素

excel - Angular 5 上的 XLSX 缩小版?

angular - 在 ionic 4 中单击硬件后退按钮关闭 ionic-datepicker

javascript - 如何使用单独的添加按钮在 IONIC2/Angular2 表单中添加嵌套字段

angular - 如何降级用 angular2 编写的自定义管道以用于 angular 1.5?

angular - Ng Bootstrap日历,自定义布局

Angular2更新表单控件值

javascript - Angular 2 动态表单 - 实现清晰的功能

Angular2 可重复使用的添加和编辑组件

angular - 尽管主题接下来调用,但指令订阅不会触发