在删除数据并单击“提交”时,AngularJs中的日期验证

时间:2017-01-12 05:42:51

标签: jquery html angularjs html5 datepicker

我有一个日期选择器控件,我在其中添加了一个必需的字段验证器。错误消息显示正确,如果我在字段中执行退格,从而删除日期,然后单击提交。但是,如果我选择日期,然后单击键盘上的删除,然后单击提交按钮,则不会显示错误消息。 以下是现有代码:

Index.cshtml

<!DOCTYPE html>
<html>
   <head>
       <!-- Compiled and minified CSS -->


       <!-- Compiled and minified JavaScript -->
       <!--Import Google Icon Font-->
       <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

       <!--Let browser know website is optimized for mobile-->
       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>

   <body>
       <!--Import jQuery before materialize.js-->
       <div class="input-field col m6">
           <i class="material-icons prefix">picture_in_picture</i>
           <input id="hello_id" type="date"/>
           <label for="hello_id">Hello, this text is a test</label>
       </div>  
       <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
   </body>
</html>

controller.js 中,日期设置如下:

<div ng-controller="testController" ng-init="init()">
    <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
        <div class="col-sm-6">
            <label class="control-label">Start date</label>
            <div class="form-group">
                <div class="input-group date" id="startDatepicker">
                    <input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <span style="color:red" ng-show="submitted == true && mainForm.startDate.$error.required">Start Date is required</span>
        </div>
        <input type="submit" value="Submit" ng-click="submitted=true" />
    </form>
</div>

如何设置验证?

0 个答案:

没有答案