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

Posted 2023-05-09

【中文标题】在AngularJS中删除输入值时如何再次验证表单

【英文标题】：How to validate form again when input value is removed in AngularJS

【发布时间】：2018-03-22 16:35:08

【问题描述】：

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

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

但是当我填写第二个输入并删除第一个输入时，

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

这是我的小提琴。

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

提前谢谢你，请纠正我的愚蠢。 :)

.

.

更新

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

1.填写第一个输入后点击注册按钮

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

.

.

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

【问题讨论】：

你可以试试这个jsfiddle.net/pkno7cgo/14让我知道你的问题是否得到解决

@ArunprasanthKV 这很完美，我的问题已经解决了！！你为什么写评论而不是回答？我要给你+10！！非常感谢！

【参考方案1】：

您可以将 ng-required="itemForm.name.$invalid" 替换为 required。

这是工作代码。

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

【讨论】：

非常适合我！再次感谢。 :)

很高兴为您提供帮助