如何在AngularJS中删除输入值时再次验证表单

Question

首先，我单击没有值的注册按钮，我的自定义指令显示右侧警报（使用甜蜜警报）。

当填充第一个输入后我完成了相同的操作时也没有问题。

但是，当我填充第二输入并除去第一输入，

形式确认（validate）忽略了第一输入是否是空的或不是。

这是我的小提琴。

Form Validating Problem

以下是我的directive。

.directive('validFocus', function() { 
    return { 
     required: 'ngModel', 
     restrict: 'A', 
     scope: { 
      invalidHTML: '&showSwal' 
     }, 
     link: function (scope, element) { 
      element.on('submit', function() { 
       var firstInvalid = element[0].querySelector('.ng-invalid'); 
       if (firstInvalid) { 
        scope.invalidHTML({html: firstInvalid}); 
       } 
      }); 
     } 
    }; 
}) 

非常感谢您的帮助和解决我的愚蠢请。 :)

。

。

UPDATE

也许这些图片可以理解我的目的很容易。

1.点击登记按钮后填充第一输入

2.点击rigster按钮移除之后第一输入值和填充第二输入

。

。

我期望的是'输入名称'。不是“输入血型”。在第二张照片。

Answer 1

你可以用required来替换ng-required =“itemForm.name。$ invalid”。

这里是工作代码。

HTML

<div ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 
     <form role="form" ng-submit="registerItem(itemData)" show-swal="showInvalidMsg(html)" name="itemForm" novalidate valid-focus> 
      <div> 
       <label>Name : </label> 
       <input ng-model="itemData.name" required 

         name="name" 
         type="text" 
         placeholder="Enter Name."> 
      </div> 
      <div> 
       <label>Asset : </label> 
       <input ng-model="itemData.asset" 
        required 
         name="asset" 
         type="number" 
         placeholder="Enter Asset."> 
      </div> 
      <div> 
       <label>Select : </label> 
       <select ng-options="sel.key as sel.value for sel in selectList" 
         data-ng-model="selectVal" 
      required 
      name="some name" 
         data-ng-change="itemData.select=selectVal">      
        <option value="">{{addressInfo}}</option> 
       </select> 
      </div> 
      <div> 
       <label>Blood : </label> 
       <input ng-model="itemData.blood" 
        required 
         name="blood" 
         type="text" 
         placeholder="Enter Blood Type."> 
      </div> 
      <div> 
       <label>Color : </label> 
       <input ng-model="itemData.color" 
        required 
         name="color" 
         type="text" 
         placeholder="Enter Color."> 
      </div> 
      <button type="submit">Register</button> 
     </form> 
    </div> 
</div> 

的js

var MyApp = angular.module('MyApp', []) 
.controller('MyCtrl', ['$scope', function ($scope) { 
    $scope.pageTitle = 'Register New Item'; 
    $scope.addressInfo = 'Choose One'; 
    $scope.isUsed = false; 
    $scope.selectList = [ 
     {key: 'one', value: '1'}, 
     {key: 'two', value: '2'}, 
     {key: 'three', value: '3'} 
    ]; 
    $scope.showInvalidMsg = function (html) { 
     console.log(html); 
     $scope.showAlert(
      $scope.pageTitle, 
      html.placeholder 
     ).then(function() { 
      html.focus(); 
     }); 
    }; 
    $scope.registerItem = function (itemData) { 

     if ($scope.itemForm.$valid) { 
      console.log(itemData); 
     } 
    }; 
    $scope.showAlert = function(mTitle, mText){ 
     return swal({ 
      title: mTitle, 
      text: mText, 
      type: 'warning', 
      animation: false, 
      allowOutsideClick: false 
     }); 
    }; 
}]) 
.directive('validFocus', function() { 

    return { 
     required: 'ngModel', 
     restrict: 'A', 
     scope: { 
      invalidHTML: '&showSwal' 
     }, 
     link: function (scope, element) { 
      element.on('submit', function() { 
       var firstInvalid = element[0].querySelector('.ng-invalid'); 
       if (firstInvalid) { 
        scope.invalidHTML({html: firstInvalid}); 
       } 
      }); 
     } 
    }; 
}) 

小提琴Link