Question

我正在开发一个类似提交表单的项目，所以我决定将一些字段移到指令中。

表单示例：

 <div loading class="col-sm-12" ng-controller="Controller">
        <form name="myForm" role="form" novalidate>
            <fieldset class="lines-header-border">
                <div class="col-sm-6">
                   <div class="form-group">
                       <label class="col-sm-4 control-label">Date</label>
                       <div class="col-sm-7">
                            <date-field 
                             model="myModel" 
                             date-picker-options="datePickerOptions"
                             for-name="date"
                             for-ng-class="myForm.date.$invalid"
                             is-required="true"/>

                       </div>
                     <div class="col-sm-4">
                    <input class="form-control" 
                           name="amount" 
                           ng-model="amount" 
                           ng-class="{ 'has-error' : myForm.amount.$invalid }" 
                           required/>
                </div>
                    </div>
            </fieldset>
        </form>
    </div>

日期字段指示：

.directive('dateField', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '=',

            datePickerOptions: '=',

            isRequired: '@',

            forName:'@',

            forNgClass: '&'
        },
        template: '<input ui-date="datePickerOptions" type="date" name="{{forName}}" class="form-control"  ng-model="model" ng-class="{ \'has-error\' : forNgClass()}"  ng-required="isRequired"/>'
    };
});

提交时的验证问题： 其他字段在表单提交按钮单击时得到验证，但此日期字段不是。我认为问题出在for-ng-class="myForm.date.$invalid"。

有什么建议吗？

Answer 1

在您的情况下，您想要访问控制器范围变量＆＃34; myForm.date。$ invalid＆＃34;通过指令属性＆＃34; for-ng-class＆＃34;。分配＆＃34; @＆＃34;到指令范围变量＆＃34; forNgClass＆＃34;用于双向数据绑定。输入字段更改后，类将相应更新。

scope:{
    .....
    forNgClass: "@"
    .....
}

我实现了一个简单的例子：

UPDATE：由于angular不能动态生成输入元素的名称属性。我们需要将dateField的input元素包装在一个内部形式中（通过使用ngForm指令）。您可以参考Angular Doc了解有关角度世界中嵌套表单的更多详细信息。

<!DOCTYPE html>
<html>

<head>
    <style>
        .has-error{
            background:#ccc;
            border: 1px solid red;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
    <script src="angular-ui-date.js"></script>
</head>

<body ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <form name="myForm" novalidate>
            <h2>Selected date: {{dateData}}</h2>
            <date-field model="dateData" is-required="true"></date-field>
            <date-field model="dateData2" is-required="true"></date-field>
            <h3>myForm is invalid?</h3>{{myForm.$invalid}}
        </form>
    </div>
    <script>
        angular.module("MyApp",['ui.date'])
        .controller("MyCtrl",function($scope){

        })
        .directive("dateField",function(){
            return {
                restrict: "E",
                replace: "true",
                template: '<ng-form name="subForm"><input ui-date ui-date-format="yy-mm-dd" type="date" ng-class="{\'has-error\':subForm.myDate.$invalid}" name="myDate" ng-model="model" ng-required="isRequired"/></ng-form>',
                scope:{
                    model: "=",
                    isRequired: "@"
                }
            };
        });
    </script>
</body>

</html>

这是Online demo。你可以参考它。

AngularJs使用指令的输入字段验证表单

1 个答案: