从自定义组件中设置Angular 2控件的有效性
我有一个自定义的Ng2组件，我正在使用模型驱动的方法。
<form [ngFormModel]="myForm" class="layout vertical relative">
<my-custom-comp ngControl="currentValue"></my-custom-comp>
</form>
因此，在我的自定义组件中，我拥有了所需的所有逻辑，但是我无法找到一种方法来获取对ngControl的引用，以便将其设置为在我的自定义组件内有效或无效。
你可以查看这个链接的一个工作示例：https：//github.com/byavv/angular2-playground/tree/master/client/app/modules/forms_explore
一些关键方面：
你需要实现ControValueAccessor。
export class Datepicker implements ControlValueAccessor {
在你的组件中注入ngControl并注册它：
constructor(private ngControl:NgControl)
ngControl.valueAccessor = this;
从你的组件中你应该有一个表单来验证这个字段，这样你就可以订阅发布正确的值或者设置父控件表单的错误。
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 });
}
});
this.myForm.controls['currentValue']....
但目前没有办法明确地将其设置为valid或invalid 。
您可以定义验证程序并更改标准，以便将控件标记为无效。
请参阅https://github.com/angular/angular/issues/4933
如何在任何formGroup上设置VALID或INVALID
// Where this.form === FormGroup;
// FormGroup can be deeply nested, just call at the level you want to update.
// That level should have direct access to base FormControls
// Can be done in a validator function;
this.form.get('name').setErrors({required: true});
// => this.form.get('name').invalid === true;
// Perhaps on Submit, click, event NOT in validator function
Object.entries(this.form.controls).forEach(([key, ctrl]) => {
ctrl.updateValueAndValidity();
});
// => this.form.get('name').invalid === false;
// => this.form.get('name').valid === true;
// => this.form.get('name').errors === null;
上一篇: Setting the validity of a Angular 2 control from within a custom component