如何在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