送信ボタンのない角度フォームの検証

Question

私はanuglar.jsフォーム検証を使用しています。 フォーム送信ボタンなしで検証を確認したいと思います。

これは私のhtmlです。

<form name="userForm"> 
    <input type="hidden" ng-model="StandardID" /> 
    <div class="form-group"> 
    <label for="email">Name:</label> 
    <input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required> 
    <span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span> 
    </div> 
    <div class="form-group"> 
    <label for="pwd">Alias:</label> 
    <input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required> 
    </div> 

    <button type="submit" class="btn btn-info" ng-click="update()">Submit</button> 
    <button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button> 
</form> 

マイコンjsです。

$scope.update= function() { 
    alert($scope.userForm.Name.$valid); 
    if ($scope.userForm.Name.$valid) { 
     alert("Entry added"); 
    } 
} 

このフィールドが必須であることを示す小さなダイアログが表示されます。私はこのポップアップを望んでいない。スパンセクションが表示されない理由

Answer 1

これを行うには、鍵は<form>のすべての入力とname属性を使用してください。 このように続いて、angularjsはあなたが例えばmyForm.myInput.$invalid

のようなすべてのフィールドにアクセスすることができ、フォームのインスタンスを作成します。

<form name="myForm" novalidate>  
    <label>My Input:</label> 
    <input type="text" name="myInput" ng-model="myInput" required> 
    <span ng-show="myForm.myInput.$dirty && !myForm.myInput.$valid">My Input is invalid.</span> 
</form> 

チェック角度docs

Answer 2

HTML

<div ng-app="myApp"> 
<form name="cutome_form" ng-submit="submitForm()" novalidate> 

    <input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required> 
           <div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid"> 
           <span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span> 
           </div> 

       <div class="form-group"> 
          <label for="pwd">Alias:</label> 
          <input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required> 
         </div> 
    <div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid"> 
     <span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span> 
    </div> 

    <button type="submit" ng-disabled="cutome_form.$invalid">Submit All</button> 
</form> 
</div> 

ディレクティブ

.directive('ngModel', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attr, ngModel) { 
      elem.on('blur', function() { 
       ngModel.$dirty = true; 
       scope.$apply(); 
      }); 

      ngModel.$viewChangeListeners.push(function() { 
       ngModel.$dirty = false; 
      }); 

      scope.$on('$destroy', function() { 
       elem.off('blur'); 
      }); 
     } 
    } 
});