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

首先，我单击了不带值的register按钮，我的自定义指令显示right alert（使用sweet alert）

当我在填写第一个输入后执行相同的操作时，也没有问题

但当我填充第二个输入并删除第一个输入时

表单验证忽略了第一个输入是否为空

这是我的小提琴

下面是我的

指令

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

提前谢谢你，请把我的愚蠢的错误纠正过来。：）

更新

也许这些图片可以让我更容易理解我的目的

1。完成第一次输入后，单击注册按钮

2。删除第一个输入值并填写第二个输入后，单击rigster按钮

---

我所期望的是第二张图片中的“输入姓名”，而不是“输入血型”。

您可以将ng required=“itemForm.Name.$invalid”替换为required

这是工作代码

HTML

---

Fiddle

您可以尝试此功能，如果您的问题得到解决，请告诉我not@ArunprasanthKV这工作完美，我的问题解决了！！你为什么写评论而不是回答？？我想给你+10！！谢谢！非常适合我！再次感谢。：）很高兴帮助你

<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>

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