使用自定义指令在表单必填字段上动态设置 ngIf

首先，我对Angular有点陌生。我创建了一个指令，该指令正在HTML中的表单组div中使用。这包含必需的输入。该指令的理念是检查是否将根据范围值显示整个div。

从视觉上看，这按预期工作，但是......当将ng-if指令设置为false值时，表单提交仍然会给出错误，因为当表单甚至不再包含该输入时，缺少所需的值。

这是我的代码：

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

谢谢你们。

取一个作用域变量validate并在条件中使其为 false，

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>

这是带有验证的演示发生，您的方案

演示，无需验证，需要答案

相关内容

最新更新

热门标签：