Question

我在下面的addnewstudent页面中使用了错误表单验证，并且工作正常。

  <td>
   <input limit-to="50" type="email" name="input" ng-model="Email" />
   <span style="display:none">{{ emailValid = !!myForm.$error.email}}</span>
   <span ng-class="customStyle.colorClass">
    {{EmailValidation }}
   </span>
  </td>

我用于编辑页面的方法如下，但我无法获得“ !! myForm。$ error”的布尔值。

我的编辑页面

 <td>
  <input limit-to="50" type="text" ng-model="Student.email" />
  <span style="display:none">{{ emailValid = !!myForm.$error.Student.email}}
  </span>
    <span>
       {{EmailValidation }} 
   </span>
 </td>

我的JS

 $scope.save = function () {

    if ($scope.emailValid || $scope.Student.email=='') {
        $scope.EmailValidation = 'Not a valid email (ex: me@example.com)';
        return;
    }
    else {
        $scope.EmailValidation = '';
    }
.......
.......

我的编辑页面上哪里出错了？

Answer 1

要验证angularjs中的表单输入，该输入和表单也应具有name属性。

angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
    $scope.Student = {}
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="sampleApp" ng-controller="myCtrl" >
  <form name="myForm" novalidate>
    <input limit-to="50" type="email" ng-model="Student.email" name="email" required/>
    <div ng-show="myForm.$submitted || myForm.email.$touched">
      <span ng-show="myForm.email.$error.required">Tell us your email.</span>
      <span ng-show="myForm.email.$error.email">This is not a valid email.</span>
    </div>
    <button>Submit</button>
  </form>
</div>

以上代码将检查非空有效电子邮件，这是通过required，type="email"属性来完成的。

编辑页面的AngularJs表单验证

1 个答案: