时间戳

首页 > 解决方案 > 在自定义控件范围内如何访问在反应形式组中声明的验证器？

angular - 在自定义控件范围内如何访问在反应形式组中声明的验证器？

问题描述

我有自定义组件（我很满意）并以这样的反应形式使用它。

private init() {
  const control4 = new FormControl("yy", Validators.pattern(".{2}"));
  const control5 = new FormControl("zz", Validators.pattern(".{3}"));

  this.form = new FormGroup({
    c4: control4,
    c5: control5
  });
}

错误消息发生在主要组件中，我可以在那里访问错误。但是，我想向自定义组件添加一些功能，以响应它无效。

<input id="c4" formControlName="c4">
<app-textbox formControlName="c5"></app-textbox>

一种方法是在app-textboxNG_VALIDATOR的装饰器中提供标记并推送对 self 的引用。但是，这会将验证器修改为上面显示的主要组件设置中已经提供的验证器。我用谷歌搜索但没有任何用处，因为大多数点击都淹没在自定义组件和自定义验证器示例中。

在响应的自定义控件范围内，是否可以访问验证器、引发的错误或反应式表单设置中使用的正则表达式？

@Component({ selector: 'app-textbox', ... ,
  providers: [
    //{ provide: NG_VALIDATOR, useExisting: forwardRef(() => ...), multi: true }, 
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ...), multi: true }]
})
export class TextboxComponent implements OnInit, ControlValueAccessor {
  ...
  private showMeTheStuff() {
    // access the validator, regex or error raised
  }
}

标签： angulartypescriptvalidationangular-reactive-forms

解决方案

这可以通过使用注入器和适当的钩子来完成，导入注入器和 NgControl 并执行以下操作：

constructor(private injector: Injector) {}

ngAfterViewInit() {
  const ctrl = this.injector.get(NgControl, null)
  console.log(ctrl)
}

那里的 ctrl 将表单控件指令分配给您的自定义控件。这可能是表单控件名称、表单控件或表单组等。您必须在那里弄清楚并处理您感兴趣的情况（可能是表单控件和表单控件名称）。您将可以访问控件及其方法/属性以及任何父级。

或者，您可以注入 ControlContainer：

constructor(private ctrl: ControlContainer) { }

可能想要标记为可选的，尽管如此。这将为您提供可以访问所有相同内容的父表单组指令。

推荐阅读