AngularJs使用指令的輸入字段來驗證表單

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

在您的情況下，您想通過指令屬性“ for-ng-class”訪問控制器作用域變量“ myForm.date。$ invalid”。 將“ @”分配給指令范圍變量“ forNgClass”以進行雙向數據綁定。 輸入字段更改后，該類將相應更新。

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

我實現了一個簡單的示例：

更新：由於angular無法動態生成輸入元素的名稱屬性。 我們需要以內部形式包裝dateField的輸入元素（通過使用ngForm指令）。 您可以參考Angular Doc以獲得有關angular世界中嵌套表格的更多詳細信息。

<!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>

這是一個在線演示。 您可以參考它。

AngularJs使用指令的輸入字段來驗證表單

問題描述

1 個解決方案

解決方案1
1 已采納 2014-06-13 06:33:03

AngularJs使用指令的輸入字段來驗證表單

問題描述

1 個解決方案

解決方案1 1 已采納 2014-06-13 06:33:03

解決方案1
1 已采納 2014-06-13 06:33:03