使用Angular指令进行Bootstrap表单验证

时间:2014-09-11 02:57:28

标签: angularjs angularjs-directive

我能够从Bootstrap中获取表单控件类,以便在单个HTML文件中表现良好。但是当从指令中定义表单控件时,不会识别像$ dirty这样的标志。类ng-dirty确实出现了。

HTML using directive:

<form class="form-horizontal" role="form" name="formExpense">
    <div frm-item ng-repeat="f in formdata2"></div>
</form>

指令:

app.directive('frmItem', function() {
    return {
        restrict: 'A',
        templateUrl: 'form.html'
    };
});

模板:

<div class="form-group" ng-class="{'has-error':formExpense.{{f.name}}.$dirty}">
    <div class="col-md-6 text-right">
        <label for="{{f.name}}-entry">{{f.name}}</label>
    </div>
    <div class="col-md-6">
        <input type="text" name="{{f.name}}" ng-model="f.amount" 
               class="form-control" placeholder="per month">
    </div>
</div>

$范围:

$scope.formdata2 = [{'name': 'housing'},{'name': 'medical'}];

普兰克:http://plnkr.co/JcanBWWTphGdL18v6NxZ

0 个答案:

没有答案