Обязательная проверка поля для отправки в угловом формате js

Question

У меня есть требование отображения двух обязательных полей на странице. У меня есть datePattern и требуемая проверка поля.

Мне нужно отобразить поле обязательное для отправки без ввода полей. Если я буду вводить что-то, то мой datePattern отлично работает. Так как это необходимо, когда я показываю, как

Ng-show = Form.field1. $ Error.required & & Form.field1. $ Чистая. Это отображает нужное сообщение при запуске, но я хочу, чтобы это было отправлено, и как только я редактирую дату моего поля. Паттер входит в картину, это нормально.

Я пробовал ng-click = представлен = true. И нг подать = ctrl.submit() это не входя в контроллер ..

Может кто-нибудь помочь ...

Answer 1

<form ng-submit="validateForm()"> 
    <input ng-model="name"> 
    <span ng-show="invalidName">Please fill name field</span> 
</form> 

controller('MyController', function ($scope){ 

    $scope.validateForm = function(){ 
    if($scope.name){ 
     $scope.invalidName = true; 
    } 

    if($scope.invalidName){ 
     //Prevent submit 
     return false; 

    }else{ 
     //Handle submit here or do nothing for auto submit of form 
    } 


    }; 

}); 

Answer 2

Как я не справиться с этим (не обещает, что это лучший способ) заключается в том, что в функции отправки я устанавливаю каждое поле формы в значение $ touchhed, тогда для каждого поля я показываю предупреждение, когда поле имеет $ error и $ touch.

jsfiddle

HTML

<div ng-app="app" ng-controller="ctrl"> 
    <div ng-form="forms.datesForm"> 
    <input type="text" ng-model="date" name=date required /> 
    <p ng-show="forms.datesForm.date.$touched && forms.datesForm.date.$invalid">Please select a date.</p> 
    <br /> 
    Your date: {{date}} 
    <button ng-click="submitForm()">Submit</button> 
    </div> 
    <p ng-show="submitted"> 
    Congrats, you submitted successfully! 
    </p> 
</div> 

JS

angular.module('app', []); 

angular.module('app').controller('ctrl', ['$scope', function ($scope) { 

    $scope.forms = {}; 

    $scope.submitForm = function() { 
    if ($scope.forms.datesForm.$invalid) { 
     setAllFieldsTouched($scope.forms.datesForm); 
     return; 
    } 
    else { 
     // do whatever submit logic here 
     $scope.submitted = true; 
    } 
    } 

    var setAllFieldsTouched = function() { 
    // loop through all the empty required fields 
    angular.forEach($scope.forms.datesForm.$error.required, function (field) { 
     // only forms have $submitted properties, not fields 
     if (field.hasOwnProperty('$submitted')) { // is a form, recur through it 
     setAllFieldsTouched(field); 
     } 
     else { // this is a field 
     field.$setTouched(); 
     } 
    }); 
    } 
}]); 

Answer 3

Я установил этот путь

форма. $ Представленный & & form.field1. $ Error.required & &! Form.field1. $ Touched