How to validate form again when input value is removed in AngularJS

Question

First, I clicked register button without values, my custom directive showed right alert (using sweet alert).

Also there was no problem when I have done same action after filled first input.

But when I filled second input and removed first input,

form validating ignored that first input is whether empty or not.

Here's my fiddle.

and below is my 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});
                }
            });
        }
    };
})

Thank you in advance and fix my foolish please. :)

.

UPDATE

Maybe these pictures can make understanding my purpose easy.

1. Click register button after filled first input

2. Click rigster button after removed first input value and filled second input

.

What I expected was 'Enter Name.' not 'Enter Blood Type.' in second picture.

you can try this jsfiddle.net/pkno7cgo/14 let me know if your issue is resolved or not — Arunprasanth K V
– Arunprasanth K V, Commented Oct 11, 2017 at 6:30
@ArunprasanthKV This works perfect and my problem has solved!! Why did you write comment instead of answer?? I wanna give you +10!! Thanks a lot! — Canet Robern
– Canet Robern, Commented Oct 11, 2017 at 6:38

Arunprasanth K V · Accepted Answer · 2017-10-11 06:41:32Z

you can just replace ng-required="itemForm.name.$invalid" with required.

here is the working code.

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

Collectives™ on Stack Overflow

How to validate form again when input value is removed in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related