以编程方式更新实现 ControlValueAccessor 的控件的值答案

【问题标题】：programatically update value on control that implements ControlValueAccessor以编程方式更新实现 ControlValueAccessor 的控件的值
【发布时间】：2016-10-19 15:52:36
【问题描述】：

我有一个带有“填写表单”按钮的表单，用于设置其模型属性。模型绑定似乎工作正常，但是当我单击按钮时，实现 ControlValueAccessor 的控件在我聚焦并模糊它们之前不会获得它们的值。

如果控件是纯 html 输入，则模型更改立即可见。如果我设置了我的自定义控件之一，在我点击它们之前，它们不会反映它们的更改...

有什么线索吗？

我使用 angular 2 final。

此代码确实显示了值，即在创建表单之后 ngOnInit() {

    super.ngOnInit();
    this.form = this.formBuilder.group({
        myfield: ['', ]
    })

    this.myfield= this.form.controls['myfield'];

    ...

    this.obs.push(this.route.params.subscribe(params => {
        if (params['myparam']) {
            this.model.myfield= params['tper_Codigo'];
            this.dataservice.get("miEntity", this.model).subscribe(somedata => {
                this.model = somedata;                   
            });
        }
    }));

这段代码没有

someClick() {
    //trying all sort of methods
    this.model = { myfield : 'aaaa'};
    this.form.patchValue({ myfield : 'bbbbb' });
    (<FormControl>this.form.controls['myfield']).updateValueAndValidity();
    (<FormControl>this.form.controls['myfield']).patchValue('cccc');

}

正如我之前所说...如果我单击并模糊元素，上述所有方法都会反映该值，因此设置了该值，直到模糊才显示

【问题讨论】：

你有一些代码可以分享吗？
好的，最后我决定深入了解 github 上的 angular2/material。我最终以与他们非常“ehem”相似的方式重构了 tmy 自定义控件的实现......现在它可以工作了。我想我永远不会知道地雷的哪一部分坏了

标签： angular controls

【解决方案1】：

我最终重写了我的控制值访问器，更像是来自 angular 团队的 angular2/material 中的访问器。 https://github.com/angular/material2/blob/master/src/lib/input/input.ts

我强烈建议在控件构建中使用这些组件作为最终参考（我说控件是为了区分“组件”的 gtom“视图”，并指代整体 ui 基本控件）。任何其他示例都不足。我还建议查看其他也将这些控件视为“灵感”的项目，例如http://code.promactinfo.com/md2/

非常有用，而且很实用

谢谢大家！

【讨论】：

【解决方案2】：

您可以使用 setValue() 函数来更新控件值。您可以查看api doc

【讨论】：

我是这样做的，还尝试了很多其他方法。有趣的部分是它在表单初始化后立即工作。之后，更改模型和/或设置补丁值无效。我还尝试手动触发摘要循环，刷新区域等。查看实现 controlvalueaccessor 的控件变化的唯一方法是手动聚焦它和模糊......奇怪！
如何在模板中绑定数据？
嗨，Mavlam，正如我之前在评论中感到难过的那样，我最终重写了我的组件，从 angular2/material 源中获取了大部分 CVA。我的代码一开始非常相似，但由于某种原因，轻微的更改最终使它按预期工作。我想回到这个问题并找出它发生的原因，但我的时间很紧，我正在解决现在问以后的模式