表单验证和用 $compile 添加的字段 [英] Form Validation and fields added with $compile
问题描述
我有一个关于表单验证的问题.在以下情况下它对我不起作用:
我有一个全局表单,在表单内部使用指令呈现动态字段.该指令基于我的字段类型将最近编译的指令附加到末日.
这里是指令:
app.directive('render', function($compile){返回 {范围:{模型:'='},限制:'A',替换:真的,模板:''+'</div>',链接:功能(范围,元素){var 指令 = null;开关(范围.模型.类型){案件编号':指令 ='我在表单中有一个按钮,当表单无效时必须禁用该按钮.问题是按钮永远不会被禁用.
html 代码:
<表格名称=表格"><div ng-repeat="f 字段"><div data-render data-model="f"></div><button ng-disabled="form.$invalid">提交</button></表单>
我的 jsFindle 链接:http://jsfiddle.net/8rz6U/1/
这是我在应用中遇到的问题的简化.字段指令更复杂,但代码在这里.
谢谢,
解决方案 我找到了这个问题的解决方案,在这个 Q &答:AngularJS:错误:无控制器:表单.诀窍是:
- 首先做追加元素
- 接下来编译
这是更改后的代码片段:
directive = ''+directive+'';//不要编译不属于 DOM 的元素//$(element).append($compile(directive)(scope));//首先包含在DOM中,然后编译var 结果 = $(directive).appendTo(element);$编译(结果)(范围);
这里正在运行 jsfiddle
I have a question regarding form validation. It is not working for me in the following scenario:
I have a global form, inside the form dynamic fields are rendered using a directive. That directive based on the type of my field appends a recently compiled directive to the doom.
here is the directive:
app.directive('render', function($compile){
return {
scope: {model: '='},
restrict: 'A',
replace: true,
template:
'<div class="product-option-selector">'+
'</div>',
link: function(scope, element){
var directive = null;
switch(scope.model.type){
case 'number':
directive =
'<div data-item-number data-model="model"></div>';
break;
case 'text':
var directive =
'<div data-item data-model="model"></div>';
break;
case 'radio':
var directive =
'<div fg-product-option-selector-radio option="option" item="item" index="index"></div>';
break;
}
if(!directive) return;
directive = '<div>'+directive+'</div>';
$(element).append($compile(directive)(scope));
}
}
});
app.directive('item', function(){
return {
scope: {model: '='},
restrict: 'A',
replace: true,
template:
'<ng-form name="innerForm">'+
'{{model.name}}'+
'<input type="text" name="innerVal" ng-model="model.value" required></input>'+
'</ng-form>'
}
});
app.directive('itemNumber', function(){
return {
scope: {model: '='},
restrict: 'A',
replace: true,
template:
'<ng-form name="innerForm">'+
'{{model.name}}'+
'<input type="number" name="innerVal" ng-model="model.value" required></input>'+
'</ng-form>'
}
});
I have a button in the form that must be disabled when the form is invalid. The problem is that the button is never disabled.
the html code:
<div ng-controller="basicController">
<form name="form">
<div ng-repeat="f in fields">
<div data-render data-model="f"></div>
</div>
<button ng-disabled="form.$invalid">submit</button>
</form>
</div>
my jsFindle link: http://jsfiddle.net/8rz6U/1/
This is a simplification of my problem in the app. the fields directives are more complex, but the code is here.
Thank you,
解决方案 I found solution for this issue, in this Q & A: AngularJS: Error: No controller: form. The trick is:
- firstly do append element
- next do compile
Here is the changed code snippet:
directive = '<div>'+directive+'</div>';
// Do Not compile the element NOT beeing part of the DOM
//$(element).append($compile(directive)(scope));
// Firstly include in the DOM, then compile
var result = $(directive).appendTo(element);
$compile(result)(scope);
Here is working jsfiddle
这篇关于表单验证和用 $compile 添加的字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文