Angular，如何有条件地设计所需字段的样式？

我不想显示我的表单的验证，直到按下提交按钮。按下按钮时，如果有效，应提交表格;如果未提交，无效字段应以红色突出显示。Angular，如何有条件地设计所需字段的样式？

由于传统原因，我导入了一个css文件，它定义了带有红色背景的input:invalid，结果标记为required的任何输入字段将始终显示为红色。

我试图通过有条件地设置ng-required在下面的小提琴中进行这项工作。这有点奏效，不同之处在于，第一次点击提交按钮时，表单$ valid的计算结果为true。

我怎么能有条件地设置ng-required这样，我的字段提交按钮被点击后仅风格和形式$valid一贯正确评估基于场处于空/非空？

https://jsfiddle.net/dk89dhp2/19/

来源

2017-06-30 ab11

你并不需要设置等于showErrors要求NG-，只是使它始终需要。你已经在css函数中检查它了。我想这就是你想念的一切。 – aw04

@ aw04是正确的，不需要ng-required，只需要HTML5属性。这里是一个工作[示例]（https://jsfiddle.net/bxanLvmx/4/）。 –

什么浏览器？如果我关注你，那么你可以在Chrome中使用它。 –

您有两个问题。第一个只是一个错字。

这样的：

ng-required="myForm.showErrors"

应该是：

ng-required="showErrors"

匹配什么是在模型中。

一旦你解决了这个问题，你会注意到它几乎可以工作，除非对话框表明表单在它不应该的时候有效。为了让摘要循环有机会运行，你可以在$timeout中包装你需要做的任何事情。（也可以使用该套showErrors值然后调用从$timeout提交功能的代理功能）

$scope.myForm.submit = function() { 
    $scope.showErrors = true; 
    $timeout(function() { 
    alert("form validity is: " + $scope.myFormNg.$valid); 
    }); 
};

updated jsfiddle

来源

2017-06-30 21:12:21 aw04

谢谢，这对我有用。超时是处理这种情况的好方法吗？避免'ng-required'会更好还是更干净，可能使用自定义验证指令，根据字段是否为空设置有效性，然后根据有效性和showErrors条件设置'class'？ – ab11

我的意思是这是一种黑客，但它工作正常。如果问题是班级，你可以做一个更好的方式，当然，但它是：无效的选择器，这是问题。如果你有控制权，确定你可以做更好的事情（基本上你可以做我和其他人在更新之前说的） – aw04

实际上你用ng-class做的事情实际上并没有做任何事情，因为你更新了jsfiddle – aw04

这工作：

https://jsfiddle.net/q6ur26mt/

我只是改变了NG-所需的值设置为true。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
<body ng-app="myapp"> 

<div ng-controller="MyController" > 
    <form name="myFormNg"> 
    <input type="text" ng-class="myForm.getCssClassForField(myFormNg.id)" ng-required="true" 
    name="id" ng-model="myForm.id" /> 

     ID 
     <br/><br/> 
     <button type="button" ng-click="myForm.submit()">submit</button> 
    </form> 
</div> 
</body> 

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

      $scope.myForm.submit = function() { 
      $scope.showErrors = true; 
      alert("form validity is: " + $scope.myFormNg.$valid); 
        }; 

      $scope.myForm.getCssClassForField = function(field) { 
      return field.$invalid && $scope.showErrors ? 'invalid' : ''; 
      }; 
     }); 
</script>

来源

2017-06-30 20:48:56

抱歉，我的问题中的场景过于简化。请参阅更新 – ab11

Angular，如何有条件地设计所需字段的样式？

回答

相关问题