时间戳

首页 > 解决方案 > 模型变异时未调用 Angular ControlValueAccessor writeValue()

angular - 模型变异时未调用 Angular ControlValueAccessor writeValue()

问题描述

我正在开发一个 Angular 自定义表单组件，它应该适用于整个对象模型的一部分，而其他标准表单组件适用于同一模型的其他部分。

为此，我ControlValueAccessor使用此 Thoughtram 博客文章作为模型来实现。

由于某种原因，当相同形式的另一个组件改变模型时，不会调用此组件的 writeValue()，尽管由于某种原因，组件内部的标准控件正在更新。

这个基于 Thoughtram 帖子的 stackblitz 示例说明了这个问题：

CounterInput1Component 接收outerModel.integer它的 ngModel，并对其进行操作。

CounterInput2Component 接收整个outerModel，然后对该integer属性进行操作。

当整数增加时，通过标准输入控件或Counter2,writeValue()调用Counter1.

然而，对于Counter2,writeValue()在实例化时被调用（两次），但此后从未被调用，无论是Counter1从标准输入控件还是从标准输入控件递增。

为什么不writeValue()为 Counter2 调用？尽管如此，它的内部组件是如何被告知要更新的？

标签： angularangular-forms

解决方案

这不是您的自定义控件表单的问题，请记住，当您更改对象的属性时，对象不会更改。您需要更改所有对象

例如你的输入像

<input name="standardInput" 
     [ngModel]="outerModel.integer" 
     (ngModelChange)="outerModel={integer:$value}" />

或者一个按钮

<button (click)="outerModel={integer:20}">click</button>

声明：writeValue 仅在更改“对象”时发生，并且在任何控件中都会发生。查看在 stackblitz 中使用 formControl 的示例

这是一个简单的formControl，

  form=new FormControl(this.data)
  ngOnInit()
  {
    this.form.valueChanges.subscribe(res=>{
      this.counter++
      console.log(res)
    })
  }
  click()
  {
   this.data.integer++
  }
    change()
  {
   this.data.integer++
   this.form.setValue(this.data);
  }

<pre>
{{form.value |json}}
Counter changes:{{counter}}
</pre>
<button (click)="click()">click</button>
<button (click)="change()">change</button>

我们可以不考虑，因为组件的外部和内部的对象是相同的，所以属性改变了，你可以看到真正的值，但重复一遍，没有改变

推荐阅读