更新-已更改表单名称 to 表格参考，因为我们传递的是实际的表单引用而不仅仅是表单的名称并不明确。您可以随意称呼它，只要清楚它实际上是什么即可。
正如 Iain Reid 的评论所说，您不需要为此使用 vm 。您只需将表单命名为您想要的任何名称，然后将该名称传递给您的组件，因此它看起来像这样：
<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
<my-input form-reference="myForm"></my-input>
<button type="submit">Some button</button>
</form>
如果您想自己处理验证（通过使用 ng-messages，我认为您可以这样做），请确保在表单中写入“novalidate”以禁用默认浏览器验证。
然后从那里，在我的组件上我会写一些类似的内容：
angular.module("myApp")
.component("myInput",{
templateUrl:'path/to/template.html'
bindings:{
formReference:'<',
myInputModel:'<',
onUpdate:'&'
},
controller: MyInputController
}
然后在输入模板中：
<input type="text" name="myInput" ng-model="$ctrl.myInputModel" ng-change="$ctrl.update($ctrl.myInputModel)" required />
<div ng-messages="$ctrl.formReference.myInput.$error">
<div ng-message="required">Please fill out this field.</div>
</div>
关于绑定以及如何传递和更新模型的一些额外说明：
-
'<': 表示单向绑定，Angular 表示将其用于所有人
从现在开始。为了更新值有两种方式
绑定时，我们需要包含一个“onUpdate”函数。
-
更新时：'&'我在这里所说的是我将通过
更新模型的函数（组件事件的回调）。
所以在输入控制器中我会写这样的东西：
function MyInputController(){
var ctrl = this;
ctrl.update = function(value){
ctrl.onUpdate({value: value});
};
}
最后，当我在表单中使用我的组件时：
<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
<my-input form-reference="myForm" my-input-model="ctrl.anyModelIWant" on-update="ctrl.updateMyInput(value)"></my-input>
<button type="submit">Some button</button>
</form>
表单的控制器有一个功能：
...
ctrl.updateMyInput = function(value){
ctrl.anyModelIWant = value;
}
...
官方文档：https://docs.angularjs.org/guide/component https://docs.angularjs.org/guide/component
我希望所有这些对那里的人有所帮助:-)
