Почему моя кнопка «Отправить» с атрибутом ng-disabled включена, когда поле ввода даты недействительно с помощью AngularJS?

Question

Я использую проверку клиентской формы с помощью AngularJS.Я намеренно набираю поле ввода даты как 'hhhh', которое должно получить недействительное поле даты и кнопка отправки отключена.Пока это не так, как ожидалось.Вот мой фрагмент кода.

<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) {
});

Я бы попросил вас направить меня.

Answer 1

Вы не используете тег формы, и тип ввода должен быть date not 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>

Cheers!