如何在角度js

Question

我正在尝试进行角度形式验证，同时面临以下难以清除的问题

1）当我点击提交时没有填写输入获取不是红色的验证消息并且没有获得电话号码字段的验证消息

2）当我输入类似名称文本框的内容时，我输入了我的姓名并删除了所有字符，然后文本框变为红色，但不需要像名称那样的验证消息

3）在开始输入电子邮件时，请输入有效的邮件ID

4）在电话号码字段中，如果我输入字符给出正确的验证消息但是如果我继续按下超过10个字符给它请输入10位数我需要避免这个

这是我的小提琴https://jsfiddle.net/cL2q3z6v/

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <!-- PAGE HEADER -->
    <div class="page-header"></div>
    <!-- =================================================================== -->
    <!-- FORM ============================================================== -->
    <!-- =================================================================== -->
    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)"  novalidate="" id="userForm">

     <!-- NAME -->
      <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid &amp;&amp; !userForm.name.$pristine }">
      <label>Name*</label> 
      <input type="text" name="name" class="form-control" ng-model="user.name" required="" />
        <p ng-show="userForm.name.$invalid && userForm.$submitted" class="help-block">Name is required.</p>
      </div>

      <!-- USERNAME -->
      <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid &amp;&amp; !userForm.username.$pristine }">
      <label>Username</label> 
      <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required="" />
        <p ng-show="userForm.username.$error.required && userForm.$submitted" class="help-block">Username is required.</p>
        <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
      </div>




      <!-- EMAIL -->
      <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid &amp;&amp; !userForm.email.$pristine }">
      <label>Email</label> 
      <input type="email" name="email" class="form-control" ng-model="user.email" required="" />
        <p ng-show="userForm.email.$invalid && userForm.$submitted" class="help-block">Enter a valid email.</p>
      </div>



      <!-- PHONE -->
      <div class="form-group" ng-class="{ 'has-error' : userForm.phone.$invalid &amp;&amp; !userForm.phone.$pristine }">
      <label>Phone Number</label>
      <input type="text" name="phone" class="form-control" ng-model="user.phone" ng-pattern="phoneNumbr" ng-maxlength="10" placeholder="+91-636-78658" />
        <p ng-show="userForm.phone.$error.required  && userForm.$submitted" class="help-block">Phone number is Required</p>
        <p ng-show="userForm.phone.$error.maxlength" class="help-block">Ten digit Required</p>
        <p ng-show="userForm.phone.$error.pattern" class="help-block">Please enter digits like 9964289813</p>
      </div>


      <div class="form-group">
        <label class="col-lg-3 control-label">Gender</label>
        <div class="col-lg-5">
          <div class="radio">
            <label><input type="radio" name="gender" value="male" ng-model="user.gender" ng-required="!user.gender"/> Male</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="gender" value=
            "female" ng-model="user.gender" ng-required="!user.gender"/> Female</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="gender" value=
            "other" ng-model="user.gender" ng-required="!user.gender"/> Other</label>
          </div>
           <p ng-show="userForm.gender.$error.required  && userForm.$submitted" class="help-block">Gender is Required</p>
        </div>
      </div>


      <div class="form-group">
        <label class="col-lg-5 control-label">Country</label>
        <div class="col-lg-5">
          <select name="country" class="form-control" required="" ng-model="user.country">
            <option value="">Select a country</option>
            <option value="AU">Australia</option>
            <option value="CA">Canada</option>
            <option value="FR">France</option>
          </select>
          <p ng-show="userForm.country.$error.required  && userForm.$submitted" class="help-block">country is Required</p>
        </div>
      </div>


      <div class="form-group">
        <label class="col-lg-5 control-label">Browser</label>
        <div class="col-lg-5">
          <div class="checkbox">
            <label>
            <input type="checkbox" name="browsers" value="chrome"  ng-model="user.browser['chrome']" ng-required="!browser(user.browser)"/> Google Chrome</label>
          </div>

        <div class="checkbox">
            <label><input type="checkbox" name="browsers" value="firefox" ng-model="user.browser['firefox']" ng-required="!browser(user.browser)"/> Firefox</label>
          </div>
          <div class="checkbox">
            <label><input type="checkbox" name="browsers" value="ie" ng-model="user.browser['ie']"  ng-required="!browser(user.browser)"/> IE</label>
          </div>
          <p ng-show="userForm.browsers.$error.required  && userForm.$submitted" class="help-block">Browser is Required</p>
        </div>
      </div><br />

  <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
</div>

脚本

var app = angular.module('myApp', []);

      app.controller('myCtrl', function($scope) {
       $scope.phoneNumbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;
     $scope.browser = function (object) {
      return Object.keys(object).some(function (key) {
        return object[key];
      });
    }
       $scope.user = {};

    $scope.user.browser = {};

       // function to submit the form after all validation has occurred   
       $scope.submitForm = function(isValid) {

        // check to make sure the form is completely valid
        if (isValid) { 
         alert('our form is amazing');
        }

       };

      });

Answer 1

如果要在表单输入下面显示验证错误，我的首选是创建一个包含错误消息和ng-if属性的字段。它可以像在现有代码中添加ng-if =“angular.isUndefined（inputModelVariableName）”一样简单。

Answer 2

您的代码有syntax errors，还有角度误差。

另外，请indent and format the code，以便您理解。

以下是已解决的要求，格式化的代码和所有字段都经过验证，请检查代码段或小提琴。

＆＃13;

＆＃13;

var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.phoneNumbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;
      $scope.browser = function (object) {
        return Object.keys(object).some(function (key) {
          return object[key];
        });
      }
    $scope.user = {};
    $scope.user.browser = {};
    // function to submit the form after all validation has occurred   
    $scope.submitForm = function(isValid) {
      
    // check to make sure the form is completely valid
    if (isValid) { 
      alert('our form is amazing');
    }
    };
  });

＆＃13;

<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <!-- PAGE HEADER -->
    <div class="page-header"></div>
    <!-- =================================================================== -->
    <!-- FORM ============================================================== -->
    <!-- =================================================================== -->
    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)"
    novalidate="" id="userForm">
      <!-- NAME -->
      <div class="form-group" ng-class=
      "{ 'has-error' : userForm.name.$invalid &amp;&amp; !userForm.name.$pristine }">
      <label>Name*</label> <input type="text" name="name" class=
      "form-control" ng-model="user.name" required="" />
        <p ng-show="(userForm.name.$invalid && userForm.$submitted) || (userForm.name.$invalid && !userForm.name.$pristine)" class="help-block">
          You name is required.
        </p>
      </div><!-- USERNAME -->
      <div class="form-group" ng-class=
      "{ 'has-error' : userForm.username.$invalid &amp;&amp; !userForm.username.$pristine }">
      <label>Username</label> <input type="text" name="username"
      class="form-control" ng-model="user.username" ng-minlength=
      "3" ng-maxlength="8" required="" />
        <p ng-show="userForm.username.$error.required && userForm.$submitted || (userForm.username.$invalid && !userForm.username.$pristine)" class=
        "help-block">
          Username is required.
        </p>
        <p ng-show="userForm.username.$error.minlength" class=
        "help-block">
          Username is too short.
        </p>
        <p ng-show="userForm.username.$error.maxlength" class=
        "help-block">
          Username is too long.
        </p>
      </div><!-- EMAIL -->
      <div class="form-group" ng-class=
      "{ 'has-error' : userForm.email.$invalid &amp;&amp; !userForm.email.$pristine }">
      <label>Email</label> <input type="email" name="email"
        class="form-control" ng-model="user.email" required="" />
        <p ng-show="(userForm.email.$invalid && userForm.$submitted) || (userForm.email.$invalid && !userForm.email.$pristine)" class="help-block">
          Enter a valid email.
        </p>
      </div><!-- PHONE -->
      <div class="form-group" ng-class=
      "{ 'has-error' : userForm.phone.$invalid &amp;&amp; !userForm.phone.$pristine }">
      <label>Phone Number</label> <input type="text" name="phone"
      class="form-control" ng-model="user.phone" ng-pattern=
      "phoneNumbr" ng-maxlength="10" placeholder="+91-636-78658" />
        <p ng-show="(userForm.phone.$error.required  && userForm.$submitted) || (userForm.phone.$invalid && !userForm.phone.$pristine)" class=
        "help-block">
          Phone number is Required
        </p>
        <p ng-show="userForm.phone.$error.maxlength" class=
        "help-block">
          Ten digit Required
        </p>
        <p ng-show="userForm.phone.$error.pattern" class=
        "help-block">
          Please enter digits like 9964289813
        </p>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Gender</label>
        <div class="col-lg-5">
          <div class="radio">
            <label><input type="radio" name="gender" value=
            "male" ng-model="user.gender" ng-required="!user.gender"/> Male</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="gender" value=
            "female" ng-model="user.gender" ng-required="!user.gender"/> Female</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="gender" value=
            "other" ng-model="user.gender" ng-required="!user.gender"/> Other</label>
          </div>
           <p ng-show="(userForm.gender.$error.required  && userForm.$submitted) || (userForm.gender.$invalid && !userForm.gender.$pristine)" class=
        "help-block">
          Gender is Required
        </p>
        </div>
      </div><br />
      <div class="form-group">
        <label class="col-lg-5 control-label">Country</label>
        <div class="col-lg-5">
          <select name="country" class="form-control" required=""
          ng-model="user.country">
            <option value="">
              Select a country
            </option>
            <option value="AU">
              Australia
            </option>
            <option value="CA">
              Canada
            </option>
            <option value="FR">
              France
            </option>
          </select>
          <p ng-show="(userForm.country.$error.required  && userForm.$submitted)  || (userForm.country.$invalid && !userForm.country.$pristine)" class=
          "help-block">
            country is Required
          </p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-5 control-label">Browser</label>
        <div class="col-lg-5">
          <div class="checkbox">
            <label><input type="checkbox" name="browsers" value=
            "chrome"  ng-model="user.browser['chrome']"
    ng-required="!browser(user.browser)"
/> Google Chrome</label>
          </div>
          <div class="checkbox">
            <label><input type="checkbox" name="browsers" value=
            "firefox" ng-model="user.browser['firefox']"
    ng-required="!browser(user.browser)"/> Firefox</label>
          </div>
          <div class="checkbox">
            <label><input type="checkbox" name="browsers" value=
            "ie" ng-model="user.browser['ie']"
    ng-required="!browser(user.browser)"/> IE</label>
          </div>
          <p ng-show="(userForm.browsers.$error.required  && userForm.$submitted)  || (userForm.browsers.$invalid && !userForm.browsers.$pristine)" class=
          "help-block">
            Browser is Required
          </p>
        </div>
      </div><br />
    
  <button type="submit" class=
  "btn btn-primary">Submit</button>
  </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

请运行此代码段

Here is a fiddle for it.

Answer 3

添加jQuery后，您的代码运行正常。它不在你的小提琴里。

这是一个链接：http://codepen.io/Sky-123/pen/woeggw

Answer 4

下面的代码作为我的期望

//defining module
var myapp = angular.module('myapp', []);
 
//creating custom directive
myapp.directive('ngCompare', function () {
 return {
 require: 'ngModel',
 link: function (scope, currentEl, attrs, ctrl) {
 var comparefield = document.getElementsByName(attrs.ngCompare)[0]; //getting first element
 compareEl = angular.element(comparefield);
 
 //current field key up
 currentEl.on('keyup', function () {
 if (compareEl.val() != "") {
 var isMatch = currentEl.val() === compareEl.val();
 ctrl.$setValidity('compare', isMatch);
 scope.$digest();
 }
 });
 
 //Element to compare field key up
 compareEl.on('keyup', function () {
 if (currentEl.val() != "") {
 var isMatch = currentEl.val() === compareEl.val();
 ctrl.$setValidity('compare', isMatch);
 scope.$digest();
 }
 });
 }
 }
});
 
// create angular controller
myapp.controller('mainController', function ($scope) {
 
 $scope.countryList = [
 { CountryId: 1, Name: 'India' },
 { CountryId: 2, Name: 'USA' }
 ];
 
 $scope.cityList = [];
 
 $scope.$watch('user.country', function (newVal,oldVal) {
 
 if (newVal == 1)
 $scope.cityList = [
 { CountryId: 1, CityId: 1, Name: 'Noida' },
 { CountryId: 1, CityId: 2, Name: 'Delhi' }];
 else if (newVal == 2)
 $scope.cityList = [
 { CountryId: 2, CityId: 3, Name: 'Texas' },
 { CountryId: 2, CityId: 4, Name: 'NewYork' }];
 else
 $scope.cityList = [];
 });
 
 // function to submit the form after all validation has occurred 
 $scope.submitForm = function () {
 
 // Set the 'submitted' flag to true
 $scope.submitted = true;
 
 if ($scope.userForm.$valid) {
 alert("Form is valid!");
 }
 else {
 alert("Please correct errors!");
 }
 };
});

<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body ng-app="myapp" ng-controller="mainController">
 <div class="container">
 <div class="col-sm-8 col-sm-offset-2">
 
 <!-- PAGE HEADER -->
 <div class="page-header"><h1>AngularJS Form Validation</h1></div>
 
 <!-- FORM : YOU CAN DISABLE, HTML5 VALIDATION BY USING "novalidate" ATTRIBUTE-->
 <form name="userForm" ng-submit="submitForm()" novalidate>
 
 <!-- NAME -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && (userForm.name.$dirty || submitted)}">
 <label>Name</label>
 <input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
 <p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">You name is required.</p>
 </div>
 
 <!-- USERNAME -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && (userForm.username.$dirty || submitted)}">
 <label>Username</label>
 <input type="text" name="username" class="form-control" ng-model="user.username" placeholder="Your Username" ng-minlength="3" ng-maxlength="8" ng-required="true">
 <p ng-show="userForm.username.$error.required && (userForm.username.$dirty || submitted)" class="help-block">You username is required.</p>
 <p ng-show="userForm.username.$error.minlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too short.</p>
 <p ng-show="userForm.username.$error.maxlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too long.</p>
 </div>
 
 <!-- PASSWORD -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && (userForm.password.$dirty || submitted)}">
 <label>Password</label>
 <input type="Password" name="password" class="form-control" ng-model="user.password" placeholder="Your Password" ng-required="true">
 <p ng-show="userForm.password.$error.required && (userForm.password.$dirty || submitted)" class="help-block">Your password is required.</p>
 </div>
 
 <!-- CONFIRM PASSWORD -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.confirmPassword.$invalid && (userForm.confirmPassword.$dirty || submitted)}">
 <label>Confirm Password</label>
 <input type="Password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword" placeholder="Confirm Your Password" ng-compare="password" ng-required="true">
 <p ng-show="userForm.confirmPassword.$error.required && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Your confirm password is required.</p>
 <p ng-show="userForm.confirmPassword.$error.compare && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Confirm password doesnot match.</p>
 </div>
 
 <!-- EMAIL -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && (userForm.email.$dirty || submitted)}">
 <label>Email</label>
 <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Your Email Address" ng-required="true">
 <p ng-show="userForm.email.$error.required && (userForm.email.$dirty || submitted)" class="help-block">Email is required.</p>
 <p ng-show="userForm.email.$error.email && (userForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p>
 </div>
 
 <!-- CONTACTNO -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.contactno.$invalid && (userForm.contactno.$dirty || submitted) }">
 <label>ContactNo</label>
 <input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Your Contact No" ng-pattern="/^[789]\d{9}$/" maxlength="10">
 <p ng-show="userForm.contactno.$error.pattern && (userForm.contactno.$dirty || submitted)" class="help-block">Enter a valid contactno.</p>
 </div>
 
 <!-- COUNTRY -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.country.$invalid && (userForm.country.$dirty || submitted)}">
 <label>Country</label>
 <select name="country" class="form-control"
 ng-model="user.country"
 ng-options="country.CountryId as country.Name for country in countryList"
 ng-required="true">
 <option value=''>Select</option>
 </select>
 <p ng-show="userForm.country.$error.required && (userForm.country.$dirty || submitted)" class="help-block">Select country.</p>
 </div>
 
 <!-- CITY -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.city.$invalid && (userForm.city.$dirty || submitted)}">
 <label>City</label>
 <select name="city" class="form-control"
 ng-model="user.city"
 ng-options="city.CityId as city.Name for city in cityList"
 ng-required="true">
 <option value=''>Select</option>
 </select>
 <p ng-show="userForm.city.$error.required && (userForm.city.$dirty || submitted)" class="help-block">Select city.</p>
 </div>
 
 <!-- TERMS & CONDITIONS -->
 <div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
 <label>Accept Terms & Conditions</label>
 <input type="checkbox" value="" name="terms" ng-model="user.terms" ng-required="true" />
 <p ng-show="userForm.terms.$error.required && (userForm.terms.$dirty || submitted)" class="help-block">Accept terms & conditions.</p>
 </div>
 
 <!-- ng-disabled FOR ENABLING AND DISABLING SUBMIT BUTTON -->
 <!--<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Register</button>-->
 <button type="submit" class="btn btn-primary">Register</button>
 </form>
 </div>
 </div>
 <br />
</body>