时间戳

首页 > 解决方案 > 当使用 AngularJS 使日期输入字段无效时，为什么没有启用具有 ng-disabled 属性的提交按钮？

angularjs - 当使用 AngularJS 使日期输入字段无效时，为什么没有启用具有 ng-disabled 属性的提交按钮？

问题描述

我正在使用 AngularJS 进行客户端表单验证。我故意将日期输入字段键入为“hhhh”，这应该使日期字段无效并且提交按钮被禁用。虽然不如预期。这是我的 cde 片段。

<div ng-app="myApp" ng-controller="myController">
    <input type="dob" id="date"  name="dob" ng-model="dob" placeholder="type your valid Date of Birth: YYYY-MM-DD" ng-pattern="^\d{4}-\d{2}-\d{2}$" class="form-control" required></input>
    <p ng-show="myForm.dob.$untouched" class="help-block">Date Of Birth is required</p>
    <p ng-show="myForm.dob.$touched && myForm.dob.$invalid" class="help-block">Please enter valid Date of Birth</p>
    <button type="submit" action="/register" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
</div>

这是我的控制器：

var MultilingualApp = angular.module("myApp",[]);
MultilingualApp.controller("myController", function ($scope) {
});

我请你指导我。

标签： angularjsvalidationform-submit

解决方案

您没有使用表单标签，并且输入类型必须date不是 dob

<form name="myForm">
        <input type="date" id="date"  name="dob" ng-model="dob" placeholder="type your valid Date of Birth: YYYY-MM-DD" ng-pattern="^\d{4}-\d{2}-\d{2}$" class="form-control" required></input>
        <p ng-show="myForm.dob.$untouched" class="help-block">Date Of Birth is required</p>
        <p ng-show="myForm.dob.$touched && myForm.dob.$invalid" class="help-block">Please enter valid Date of Birth</p>
        <button type="submit" action="/register" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
</form>

干杯!

推荐阅读