CODEWITHSUNDEEP
javascripthtmlangularjs
Ricardo Mota
Ricardo Mota

Reputation: 1214

Setting ngIf dynamically on a form required field with a custom directive

First of all I'm kinda new to Angular. I've created a directive that is being used in my form-group div in the HTML. This contains a required input. The ideia of this directive is to check if the entire div will be shown based on a scope value.

Visually, this works as expected but... when setting the ng-if directive to a false value, the form submission still gives an error as a required value is missing when the form doesn't even contain that input anymore.

This is my code:

// My Directive
app.directive("showCountry", function ($compile) {

    var linkFunction = function (scope, element, attributes) {

        var testingVariable = scope.testingVariable;

        if (testingVariable) {
            switch (testingVariable.toLowerCase()) {
                case "A":
                    // Do nothing, keep the div visible.
                    break;
                default:
                    // Hide the entire div.
                    attributes.$set("ngIf", false);               
					          compile(element)(scope);
                    break;
            }
        }
    };

    return {
        restrict: "A",
        link: linkFunction
    };
});
<!-- My HTML with required field using my directive -->
<div class="form-group" show-country>
	<label class="col-lg-6 col-md-6 control-label">
		Country
	</label>
	<div class="col-lg-6 col-md-6">
		<input name="country" type="text" placeholder="Country" ng-model="country" ng-required="true"/>
	</div>
</div>

Thank you guys.

Upvotes: 0

Views: 1453

Answers (1)

Sravan
Sravan

Reputation: 18647

Take a scope variable validateand make it false in the condition,

if (testingVariable.toLowerCase()) {
    switch (testingVariable.toLowerCase()) {
        case "A":
            // Do nothing, keep the div visible.
            break;
        default:
            // Hide the entire div.
            scope.validate = false;
            attributes.$set("ngIf", false);               
                      $compile(element)(scope);
            break;
    }
}


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="test">
<form name="myForm">
The country input is hided and animation wil not occur
<div class="form-group" show-country validate="validate">
	<label class="col-lg-6 col-md-6 control-label">
		Country
	</label>
	<div class="col-lg-6 col-md-6">
		<input name="country" type="text" placeholder="Country" ng-model="country" ng-required="true" ng-if="validate"/>
	</div>
</div>
</form>
<h1>{{myForm.country.$error}}
<script>
var app = angular.module("myApp", []);
app.directive("showCountry", function ($compile) {

    var linkFunction = function (scope, element, attributes) {

        var testingVariable = scope.testingVariable;
		console.log(testingVariable.toLowerCase())
        if (testingVariable.toLowerCase()) {
            switch (testingVariable.toLowerCase()) {
                case "A":
                    // Do nothing, keep the div visible.
                    break;
                default:
                    // Hide the entire div.
                    scope.validate = false;
                    attributes.$set("ngIf", false);               
					          $compile(element)(scope);
                    break;
            }
        }
    };

    return {
        restrict: "A",
        link: linkFunction
    };
});
app.controller("test", function ($scope) {
  $scope.testingVariable = 'false';

});

</script>

</body>
</html>

Here is the DEMO with validation Occuring, Your scenario

DEMO with novalidation, Required answer

Upvotes: 1

Related Questions