Question

我有一个自定义组件（对此感到满意），并以这种反应形式使用它。

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-textbox 的装饰器中提供NG_VALIDATOR标记，并将对自己的引用推送。但是，这将修改验证器到上面显示的主要组件设置中已经提供的验证器。我用Google搜索，但没有任何用处，因为大多数匹配都淹没在自定义组件和自定义验证器示例中。

在对自定义控件进行反应时，是否可以访问验证器，引发的错误或反应式设置中使用的正则表达式？

@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
  }
}

Answer 1

我知道这不是最好的方法，但至少是这样：

如果要访问自定义组件（子组件）中的FormGroup，只需将MainComponent的FormGroup （this.form）作为 @Input 传递给自定义组件。 > ...然后您就可以从变量中访问整个FormGroup API。

像<app-textbox [form]="form" formControlName="c5"></app-textbox>

并在您的孩子（TextBoxComponent）内部捕获@Input() form: FormGroup;之类的MainComponent形式

Answer 2

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

constructor(private injector: Injector) {}

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

该Ctrl将为您的自定义控件分配表单控件指令。这可能是表单控件名称，表单控件或表单组等。您必须在那里找到它并处理您感兴趣的情况（可能是jsut表单控件和表单控件名称）。您将可以访问该控件及其方法/属性以及任何父级。

或者，您可以注入ControlContainer：

constructor(private ctrl: ControlContainer) { }

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

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

2 个答案: