Question

在用户尝试提交表单之前，我不想呈现验证问题。

我有一个包含2个字段的表单，一个是required和ng-minlength=5，另一个是ng-minlength=5。如果字段无效，我想在用户尝试提交表单时以红色背景显示它们。

我试图通过根据字段的有效性确定控制器中的样式以及是否单击了提交按钮来尝试这样做。

虽然这对我不起作用，但该字段从不显示为红色。关于如何让这种方法起作用的任何建议？

这是一种合理的方法，还是Angular的策略更具惯用性？

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<style>
.my_invalid{
   border-color:#ffdddd;
   background-color:#ffdddd;
   background-image: none;
  }

</style>

<body ng-app="myapp">

<div ng-controller="MyController" >
    <form name="myFormNg">
        <input type="text" class="myForm.getFormFieldCssClass(myFormNg.id)" name="id" ng-model="myForm.id" ng-minlength="5" required> Id <br/>
        <input type="text" class="myForm.getFormFieldCssClass(myFormNg.name)" name="name" ng-model="myForm.name" ng-minlength="5"> Name <br/>
        <button type="button" ng-click="myForm.submit()">Submit</button>
    </form>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.showErrors = false;

                $scope.myForm.submit = function() {
                        $scope.showErrors = true;
                }

                $scope.myForm.getFormFieldCssClass = function(ngModelController) {
                    if (ngModelController.$pristine) 
                        return "";
                    return ngModelController.$valid && $scope.showErrors ? "" : "my_invalid";
                    // additional logic to check if empty and required?
                }
            } );
</script>

Answer 1

现在它无法正常工作，因为您正在使用class，只允许您绑定＆＃34;静态＆＃34;类而不是ng-class指令。

我改变你的代码只是为了添加指令，关于你的方法，我坚持下去，你需要某种控制来检查表单是否有效以及是否启用了错误。

<input type="text" ng-class="{'input1Error': myForm.getFormFieldCssClass(myFormNg.id})" />
<input type="text" ng-class="{'input2Error': myForm.getFormFieldCssClass(myFormNg.id})" />

然后在你的方法结束时将返回类型更改为boolean以确定是否应用类

$scope.myForm.getFormFieldCssClass = function(ngModelController) {
   if (ngModelController.$pristine) 
      return false;
   return ngModelController.$invalid && $scope.showErrors ? true : false;
}

Answer 2

你也可以尝试如下。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<style>
.my_invalid{
   border-color:#ffdddd;
   background-color:#ffdddd;
   background-image: none;
  }
  </style>
<body ng-app="myapp">

<div ng-controller="MyController" >
    <form name="myFormNg">
        <input type="text" class="myForm.getFormFieldCssClass(myFormNg.id)" id="textbox1" name="id" ng-model="myForm.id" ng-minlength="5" required> Id <br/>
        <input type="text" class="myForm.getFormFieldCssClass(myFormNg.name)" id="textbox2" name="name" ng-model="myForm.name" ng-minlength="5"> Name <br/>
        <button type="button" ng-click="myForm.submit()">Submit</button>
    </form>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.showErrors = false;
                
                $scope.myForm.submit = function() {
                	angular.element('#textbox1').css('border-color', 'red');
					angular.element('#textbox2').css('border-color', 'red');
					
						
                }
               
               	$scope.myForm.getFormFieldCssClass = function(ngModelController) {
                    if (ngModelController.$pristine) 
                    	return "";
                    return ngModelController.$valid && $scope.showErrors ? "" : "my_invalid";
                    // additional logic to check if empty and required?
                }
            } );
</script>

</body>
</html>

＆＃13;

使用Angular，如何在事件上显示验证问题？

2 个答案: