Question

我想创建一个角度为1.5的组件。在此之后，我想在不同的地方重复使用该组件（甚至在同一页面上重复两次）。

我的问题是如何验证组件中的表单。我试图为表单添加一个名称，但是从我能够看到的，在同一个html页面中使用相同的名称会产生问题。

这是我的plunker

ng-click="myFormName.$valid && viewModel.doSomething()"

我将改述我的问题，我改变了我的plunker来显示我的整个应用程序和我想要实现的目标。 link。

单个输入是可以要求的组件（请参阅plunker的customInput）。这些组件用于通用面板。（参见plunker的customPanel）。

您可以在面板中看到两个操作：

1）提交按钮 - 如果未填写所需元素，浏览器将显示一些内容以告知用户必须填写的内容

2）带有动作的图片 - 我的问题是：我如何使用提交动作执行类似的操作？我想拥有相同的用户体验（浏览器显示一些信息告诉用户需要填写什么）或者标记面板未正确填充的内容

Answer 1

组件具有隔离范围，因此如果将表单放在组件中，表单控制器将附加到隔离范围 - 这意味着您可以使用具有相同名称的“多个”表单（因为每个表单都在其自身上）范围）。

要获取表单控制器，只需在组件控制器中绑定它即可。

angular.module('test').component('myComponent', {
 template: '<div class="panel-group">' + 
        '  <div class="panel panel-primary">' +
        '   <form name="myFormName" ng-submit="viewModel.doSomething()" ng-cloak> ' + 
        '       <input type="text" required />  ' +
        '       <button type="button" ng-click="myFormName.$valid && viewModel.doSomething()">Another submit action </button>' +
        '       <button type="submit">Submit Me ! </button>' +
        '       current value = {{viewModel.count}} '+
        '   </form>' +
        '  </div> ' + 
        '</div>',

bindings: {
    formCtrl: '='
},

controllerAs : 'viewModel',

controller : function(){

  var model = this;
  model.formCtrl = model.myFormName; // This will bind your inner form controller to the outside binding property
  model.count = 0;

  model.doSomething = function(){
    model.count = model.count + 1;
  }

}

}）;

现在，您可以通过绑定到“formCtrl”绑定属性，从外部作用域访问表单控制器。

<my-component form-ctrl="yourControllerBindingGoesHere"></my-component>

从角度1.5组件验证表单

1 个答案: