javascript - 表单验证在 Internet Exloprer 9 中不起作用 - AngularJS

Question

表单验证在 Firefox 中工作正常，但在 Internet Explorer 9 中失败。

我为动态生成的必填字段使用了这个 span 标记来验证空字段。

<span ng-show="hasError('"+fieldName+"', 'required')"></span>

$scope.hasError= function(field, validation){
        if(validation){
          return ('$scope.myForm.field.$dirty' && '$scope.myForm.field.$error[validation]') || ($scope.submitted && '$scope.myForm.field.$error[validation]');
        }
        return ('$scope.myForm.field.$dirty' && '$scope.myForm.field.$invalid') || ($scope.submitted && '$scope.myForm.field.$invalid');
    };

一开始我有

$scope.hasError = function(field, validation){
    if(validation){
      return ($scope.myForm[field].$dirty && $scope.myForm[field].$error[validation]) || ($scope.submitted && $scope.myForm[field].$error[validation]);
    }
    return ($scope.myForm[field].$dirty && $scope.myForm[field].$invalid) || ($scope.submitted && $scope.myForm[field].$invalid);
};

这给了我

类型错误:无法获取属性“$dirty”的值:对象为 null 或未定义

在 IE9 控制台中，将其更改为上面发布的代码后，TypeError 消失了，但文本框周围的红色边框仍然没有出现在 IE9 中，以提醒用户空字段。

针对 IE9 应该做什么才能验证空字段？

或者是否有其他方法来验证在 Firefox 和 IE 中动态生成的表单字段？

Answer 1

据我所知，确保表单验证的最佳方法是检查表单在提交时是否有效。

遵循 Developer Guide for Forms ，创建一个名为 update 的函数。然后在保存之前添加检查以查看表单是否有效:

$scope.update = function(user) {
    if (!$scope.myformname.$valid) return false;
    $scope.master = angular.copy(user);
};

其他重要步骤是将这个新的更新功能连接到“提交”按钮:

<form ng-submit="update(user)" name="myformname" novalidate>

在我看来，在表单无效时禁用“提交”按钮:

<input type="submit" ng-disabled="!myformname.$valid" value="Save" />

请参阅以下example 。我添加了两种不同的显示错误消息的样式。