Question

首先，我对Angular有点新意。我已经在HTML中的form-group div中创建了一个指令。这包含必需的输入。该指令的意思是检查是否将根据范围值显示整个div。

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢你们。

Answer 1

获取范围变量validate并在条件中将其设为假，

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

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

1 个答案: