什么是Angular中的ngDefaultControl？原因和解决方法

在Angular中，第三方控件需要使用ControlValueAccessor与Angular表单一起使用。其中许多第三方控件（如Polymer的）的行为类似于本地元素，因此可以使用DefaultValueAccessor。添加ngDefaultControl属性将允许它们使用该指令。

这就是引入这个属性的主要原因。

在angular2的alpha版本中，它被称为ng-default-control属性。

ngDefaultControl是DefaultValueAccessor指令的选择器之一：

意味着我们可以将该属性应用于没有自己的值访问器的元素（如Polymer组件）。因此，该元素将采用DefaultValueAccessor的行为，并且我们可以将该元素与Angular表单一起使用。

否则，您必须提供自己的ControlValueAccessor实现。

ControlValueAccessor是Angular文档中的一个桥梁，用于连接Angular表单API和DOM中的本地元素。

让我们在一个简单的Angular2应用程序中编写以下模板：

为了了解我们上面的将如何运行，我们需要知道应用于该元素的指令。在这里，Angular通过错误提供了一些提示：

我们导入了FormsModule，一切都按预期工作。但是在幕后发生了什么？

FormsModule为我们导出了以下指令：

在我们的例子中，NgModel将注入DefaultValueAccessor。现在，NgModel指令调用了共享的setUpControl函数：

设置了控件（1），调用了dir.valueAccessor.registerOnChange方法（2）。ControlValueAccessor将回调存储在onChange属性中（2），并在输入事件发生时触发此回调（3）。最后在回调中调用了updateControl函数（4）。

其中angular调用了表单API control.setValue。

那就是它是如何工作的简短版本。

我只是添加了（）ngModel和（）ngModelChange用于双向绑定，我认为这应该足够了一个桥梁。这看起来像是以完全不同的方式做同样的事情。也许我不应该将我的字段命名为ngModel？

如果您不使用此组件与Angular表单一起使用，则可以创建自己的双向绑定，如（）value;（）valueChange: EventEmitter = new EventEmitter();，然后只需使用[(value)] =“someProp”

这正是我一直在做的。但是我将我的“value”命名为ngModel，Angular开始向我抛出错误，并要求使用ControlValueAccessor。

谁知道在vue和React中等效于ngDefaultControl是什么？我的意思是，我使用控制值访问器在Angular中制作了一个自定义输入组件，并将其作为Angular元素封装为Web组件。在同一个项目中，我不得不使用ngDefaultControl来使其与Angular表单一起使用。但是在Vue和React中该怎么办？原生JS中也是如此吗？

我在我的自定义组件上使用了ngDefaultControl，但是我遇到了一个问题。当我为formBuilder中的formControl设置默认值时，视图（自定义输入组件）不会被更新，只会更新模型。我做错了什么？

在构建--prod应用程序时，我遇到错误：类型'FormControl'上不存在属性'_pendingValue'

当尝试将ngModel绑定到数组中的嵌套值时，这将起作用吗？

非常感谢您的详细答案！这正是我在开始收到此错误时正在寻找的：一个关于发生了什么的深入解释。了解Angular在幕后如何工作的一个很好的起点。它是一种非常复杂的技术，而且在很大程度上，你只能暴露给一个很少的表面方面。