Question

我有一个HTML表单，它是从给定的“产品”对象及其拥有的字段动态构建的，允许用户修改关联的数据。我正在使用自定义“编辑器”指令来处理允许用户更新数据所需的HTML元素的创建。

这里可以看到一个例子：http://plnkr.co/edit/2fAVVpwTHFgxwTq4eAMI

首先，我不确定这是否是实现这一目标的最佳方法，但它确实（到目前为止）似乎工作正常。（欢迎任何其他想法！）

但是，我想在控件中添加验证规则，例如。 require以便在输入为空时显示消息。我试图将这些验证规则添加到代码中（如指令中的模板中所示），但它永远不会触发。我很确定这与我的范围内的电线交叉有关... AngularJS Batarang在主要范围上展示了一个对象：

form: {
  {{fieldName}}: {}
}

这显然是错的（和胡说八道！）

Answer 1

以自己的ng格式包装模板：

textTemplate =  '<div ng-form="editor">' +
                  '<input id="{{fieldName}}" name="{{fieldName}}" type="text" ng-model="fieldData.data" required>' +
                  '<div ng-show="editor.$dirty && editor.$invalid">Invalid:' +
                      '<span ng-show="editor.$error.required">Some validation error!</span>' +
                  '</div>' +
                '</div>';

您遇到的问题是，在创建隔离范围（范围{...}）时，您无权访问父窗体或任何父窗口。 IMO，这绝对是一件好事，因为您不希望您的指令硬编码父表单的名称，并且它将您的指令保持为一个独立的单元。

代码：http://plnkr.co/edit/qCjs16tuwVjSNzJdkk71?p=preview

Answer 2

而不是检查 form[fieldName].$dirty && form[fieldName].$invalid ，只检查是否存在模型值

所以textTemplate看起来如下

textTemplate =  '<input id="{{fieldName}}" name="{{fieldName}}" type="text" ng-model="fieldData.data">' +
    '<div ng-show="!fieldData.data">Invalid:' +
        '<span ng-show="!fieldData.data">Some validation error!</span>' +
    '</div>';

查看http://plnkr.co/edit/BvXkGxA0GlGip7KLXUup?p=preview

中的更新更改

自定义指令中的表单验证...？

2 个答案: