Comment valider à nouveau le formulaire lorsque la valeur d'entrée est supprimée dans AngularJS

Question

D'abord, j'ai cliqué sur le bouton d'enregistrement sans valeurs, ma directive personnalisée a montré une alerte correcte (en utilisant l'alerte douce).

Il n'y avait pas non plus de problème quand j'ai fait la même action après la première entrée remplie.

Mais quand je deuxième entrée et retiré remplissais première entrée,

forme

ignora la validation première entrée est de savoir si vide ou non.

Voici mon violon.

Form Validating Problem

et ci-dessous est mon 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}); 
       } 
      }); 
     } 
    }; 
}) 

Merci d'avance et corrigez mon idiot s'il vous plait. :)

.

.

MISE À JOUR

Peut-être que ces images peuvent faire comprendre mon but facile.

1. Cliquez sur le bouton enregistrer après la première entrée remplie

2. Cliquez sur le bouton rigster après avoir été retiré première valeur d'entrée et la seconde entrée remplie

.

.

Ce que j'attendais était 'Entrer le nom'. pas "Entrer le type de sang". en deuxième image.

Answer 1

vous pouvez simplement remplacer ng-required = "itemForm.name. $ Invalid" avec requis.

Voici le code de travail.

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}); 
       } 
      }); 
     } 
    }; 
}) 

Fiddle Link