Question

我有一个在每个表单字段更改后更新的函数。但是使用单选按钮时，表单状态不会有效，直到我更改单选按钮两次，或更改其他字段。更重要的是，当我控制日志表单对象时，我可以看到无线电组确实有效。

HTML

 <div ng-controller="formController">
  <form name="testForm" novalidate>
    <input type="text" name="name" placeholder="Name" ng-model="name" required ng-change="updateForm(testForm)">
    <ng-form name="radioGroup">
      <input type="radio" name="radioGroup1" required="!sex" ng-model="sex" value="male" ng-change="updateForm(testForm)"/> Male
      <input type="radio" name="radioGroup2" required="!sex" ng-model="sex" value="female" ng-change="updateForm(testForm)"/> Female
    </ng-form>
  </form>

  <div ng-show="testForm.$dirty">
    Form Dirty
  </div>
  <div ng-show="isFormDirty">
    From Dirty from controller
  </div>
  <div ng-show="testForm.$valid">
    Form Valid
  </div>
    <div ng-show="isFormValid">
    From Valid from controller
  </div>
</div>

和Javascript

angular.module('app',[]).controller('formController', function($scope)         {
      $scope.hello = 'hello from controller';
      $scope.name = null;
      $scope.sex = null;
      $scope.isFormDirty = null;
      $scope.isFormValid = null;

      $scope.updateForm = function(form) {

        if(form.name.$dirty || form.radioGroup.$dirty) {
          $scope.isFormDirty = true;
        }

        if(form.name.$valid && form.radioGroup.$valid) {
          $scope.isFormValid = true;
        }

      }
    });

我还创建了一个“{3}}”，因此您可以看到我正在谈论的内容。对此问题的任何见解都将是一个很大的帮助。

Answer 1

您使用map_main_to_dev检查表单的有效性。并且在角度验证表单过程发生之前触发ng-change="updateForm(testForm)"。这就是为什么你可以在ng-change中看到表格有效而不是执行。

为了更轻松地调试您的表单，我建议使用：

console.log($scope.testForm)

Angular会向您显示表单的“实时状态”。

Answer 2

我能够通过在超时时将我的呼叫包裹到$scope.updateForm来解决我的具体问题。我知道这可能不是最好的解决方案，但它适用于我的目的

  $scope.callTimeout = function(form) {
    $timeout(function() {
      $scope.updateForm(form);
    }, 0)
  }

然后

  <input type="radio" name="radioGroup1" required ng-model="sex" value="male" ng-change="callTimeout(testForm)" ng-click/> Male
  <input type="radio" name="radioGroup2" required ng-model="sex" value="female" ng-change="callTimeout(testForm)" ng-click/> Female

此外这只是我正在研究的更大项目的演示。我没有使用$scope.updateForm来实际检查用户消息的表单验证，我只是在这种情况下检查$dirty和$valid来更新表单的进度条。

角度单选按钮表单验证无法按预期工作

2 个答案: