angular - 如何创建可以支持ngModel和ngControl指令的组件

This question already has answers here:

Angular4 - No value accessor for form control

(4个答案)

2年前关闭。

要在我的组件中访问NgControl，我创建了构造函数:

NgControl _cd;
MyDateEditComponent(@Self() @Optional() this._cd);

我想这样使用我的组件:

<my-date-edit [(ngModel)]="date" ngControl="date">

要么

<my-date-edit [(date)]="date" ngControl="date">

现在我有错误:

断言失败:“(日期)没有值访问器，或者您的指令列表中可能缺少formDirectives”。

如何解决？

最佳答案

如果在自定义组件上使用ngModel，请使用ControlValueAccessor

export class YourComponent implements ControlValueAccessor { 
    // need to imlement following methods
    onChange = (val: Date) => { };
    onTouched = () => { };

    writeValue(val: Date) {
        // your ngModel value comes under here
    }

    registerOnChange(fn: (val: Date) => void) {
        this.onChange = fn;
    }

    registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
    }
}

关于angular - 如何创建可以支持ngModel和ngControl指令的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51744371/

上一篇：unit-testing - 单元测试 Dart 异步流

下一篇：dart - 可滚动的 flutter 弹出菜单

javascript - 为什么有时我们需要 [attr.] 前缀进行绑定(bind)

dart - 如何居中ListView？

flutter/Dart : Communication between features in Clean Architecure

dart - 在 Flutter 中获取设备的宽度和高度

angular - 是否可以导入没有模块的组件

javascript - Typescript 和 Angular 2 反射

javascript - 麻烦单元测试 Angular react 性表单字段

dart - Flutter Http 请求 : Invalid response status code

dart - Flutter/Dart 引用函数与使用 Widget 内联执行