Question

在按下提交按钮之前，我不想显示表单的验证。按下按钮时，如果有效，则应提交表单;如果未提交，则无效字段应以红色突出显示。

由于遗留原因，我正在导入一个用红色背景定义input:invalid的css文件，因此标记为required的任何输入字段将始终显示为红色。

我试图通过有条件地设置ng-required来完成这项工作。这有点奏效，但第一次单击提交按钮时，$ valid的格式为true。

如何有条件地设置ng-required，以便仅在单击提交按钮后对我的字段进行样式设置，并且表单$valid根据字段为空/非空来始终正确评估？

Answer 1

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

这样：

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

Answer 2

这有效：

https://jsfiddle.net/q6ur26mt/

我刚刚将ng-required值更改为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>

Angular，如何有条件地设置必填字段？

2 个答案: