angularjs – Angular – 使用表单输入指令时的表单验证问题

2024年1月8日 224次阅读

我一直在尝试构建一个表单输入指令,它将根据模型和模型属性生成表单输入.

例如,

>如果字段是name并且type是text,则该指令将返回一个输入html控件,
>如果该字段是列表,则它将返回一个选择框
等等

这些输入是在视图中使用ng-repeat生成的.输入绑定到范围中的模型.这工作正常.但是,表单验证失败;即如果输入控件无效,则主窗体仍然显示该窗体有效.

我已经设置了一个简单的plunkr来说明问题 – http://plnkr.co/edit/R3NTJK?p=preview

注意：我实际上嵌套了表单,因为输入名称字段也是从作用域模型动态生成的.

从过去的两天开始,我一直试图抓住这个,这真的让我疯狂.

我不确定我是否遗漏了什么.

如果有人能帮我解决这个问题,我真的很感激.

最佳答案 更新：

使用以下链接功能：

link: function linkFn(scope,elem,attr){
   var jqLiteWrappedElement = 
       angular.element('<input type="url" name="socialUrl" ng-model="social.url">');
   elem.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)(scope);
}

Plunker.

由于我不明白的原因,必须在调用$compile之前执行replaceWith().如果有人能解释为什么会这样,我们会很感激！

Update2：在下面的评论中,Artem提到必须在调用链接函数之前修改DOM,所以这也有效：

var myElem = angular.element('some html');
var linkFn = $compile(myElem);
element.replaceWith(myElem);
linkFn(scope);

原始答案：

而不是链接功能,只需在您的指令中使用模板：

template: '<input type="url" name="socialUrl" ng-model="social.url">'
点赞