javascript - 如何在angularjs中使用 `ngMessages`表单验证

Question

我是 angularjs 新手，我需要帮助找出我做错了什么。我正在使用 ngMessages 进行表单验证，但表单提交不起作用。

这是我的代码:

angular.module("myapp", ["ngMessages"])

p {
  color: red;
}

<script src="https://code.angularjs.org/1.7.2/angular.js"></script>
<script src="https://code.angularjs.org/1.7.2/angular-messages.js"></script>
<div ng-app="myapp">
  <form name="myform" method="post" novalidate>

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="myform.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
    </div>
    <input type="submit" name="submit">
  </form>
</div>

Answer 1

基本上你需要使用ng-submit，

<form name="myform" ng-submit="submit(myform.$valid)" novalidate>

然后在你的 Controller 中，你需要定义一个方法submit

$scope.submit = function(isValid){
    if(isValid){
       $http.post('your_post_url_here',your_form_data).then(function(success){
             // success message
       })
    }
}