将表单传递给指令 [英] Pass form to directive

问题描述

我想将我的表单字段封装在一个指令中，这样我就可以简单地做到这一点:

<my-input name='Email' type='email' label='Email Address' placeholder="Enter email" ng-model='model.email' required='false'></my-input>

如何访问指令中的 myForm 以便我可以进行验证检查，例如myForm.Email.$valid?

解决方案

在指令中访问 FormController:

require: '^form',

然后它将作为链接函数的第四个参数可用:

link: function(scope, element, attrs, formCtrl) {控制台日志(formCtrl)；}

小提琴

不过，您可能只需要访问 NgModelController:

require: 'ngModel',链接:函数(范围、元素、属性、ngModelCtrl){控制台日志(ngModelCtrl)；}

小提琴

如果您需要访问两者:

require: ['^form','ngModel'],链接:函数(范围，元素，属性，ctrls){控制台日志(ctrls)；}

小提琴

I want to encapsulate my form fields in a directive so I can simply do this:

<div ng-form='myForm'>
  <my-input name='Email' type='email' label='Email Address' placeholder="Enter email" ng-model='model.email' required='false'></my-input>

</div>

How do I access the myForm in my directive so I can do validation checks, e.g. myForm.Email.$valid?

解决方案

To access the FormController in a directive:

require: '^form',

Then it will be available as the 4th argument to your link function:

link: function(scope, element, attrs, formCtrl) {
    console.log(formCtrl);
}

fiddle

You may only need access to the NgModelController though:

require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
     console.log(ngModelCtrl);
}

fiddle

If you need access to both:

require: ['^form','ngModel'],
link: function(scope, element, attrs, ctrls) {
    console.log(ctrls);
}

fiddle

这篇关于将表单传递给指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！