forms - 从自定义组件中设置 Angular 2 控件的有效性

Question

我有一个自定义的 Ng2 组件，我正在使用模型驱动方法。

<form [ngFormModel]="myForm" class="layout vertical relative">
    <my-custom-comp ngControl="currentValue"></my-custom-comp>
</form>

所以在我的自定义组件中，我拥有我需要的所有逻辑，但我无法找到一种方法来获取对 ngControl 的引用，以便从我的自定义组件中将其设置为有效或无效。

Answer 1

您可以查看此链接以获取工作示例:https://github.com/byavv/angular2-playground/tree/master/client/app/modules/forms_explore

一些关键方面:
您需要实现 ControValueAccessor。

export class Datepicker implements ControlValueAccessor {

在您的组件中注入(inject) ngControl 并注册它:

constructor(private ngControl:NgControl)
ngControl.valueAccessor = this;

在您的组件中，您应该有一个验证该字段的表单，以便您可以订阅以发出正确的值或设置父 ngControl 表单的错误。

 this.dateForm = builder.group({
          dateControl: ['', Validators.compose([Validators.required, CustomValidators.frenchDate])],
        });

    this.dateForm.valueChanges
      .subscribe((val) => {
        if (this.dateForm.valid) {
          this.onChange.emit(this.dateToTimestamp(val.dateControl));
        } else {
          this.ngControl.control.setErrors({ "wrongDate": true });
        }
      });