Question

今天我接近了一个奇怪的案例：我有两个单选按钮。当一个（当前已选中）被禁用时，表单应该无法提交。问题是，form.$valid的标准方法不起作用： - /

更新即使我注意到表单中的更改，$invalid状态也不会反映在ng-disable保存按钮上。为什么呢？

<input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
<input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>

<button ng-disabled="!RadioPen.someForm.$valid">Save</button>

以下是完整的工作示例：CodePen

Answer 1

form.$valid工作正常。 required检查基于表单元素的value工作。由于您已经在控制器脚本中为与单选按钮关联的模型提供了值，即RadioPen.data.radio，因此正在满足required条件，因此表单已经过验证。这是一个修改过的代码版本，我删除了单选按钮模型的初始化。

＆＃13;

angular
  .module('test', [])
  .controller('RadioPen', radioPen)

function radioPen($scope) {
  var vm = this;
  vm.data= {};
  $scope.RadioPen = vm;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test"> 
  <form name="RadioPen.someForm" ng-controller="RadioPen" novalidate>
    Current
    <input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
    Delayed
    <input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>

    <button ng-disabled="!RadioPen.someForm.$valid">Save</button>
    {{'is valid: ' + RadioPen.someForm.$valid}}
  </form>
</div>

＆＃13;

Answer 2

检查一下：

<div ng-app="test"> 
  <form name="ctrl.someForm" ng-controller="RadioPen as ctrl" novalidate>
    Current
    <input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
    Delayed
    <input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>

    <button ng-disabled="ctrl.someForm.$invalid">Save</button>
    {{'is invalid: ' + ctrl.someForm.$invalid}}
  </form>
</div>

在使用两个单选按钮的Angular验证表单期间发出问题

2 个答案: