javascript - Angularjs，检查表单中的单选按钮是否已被选择

Question

我从 AngularJS 开始，正在构建一个多步骤表单，用户必须填写不同的页面。完成一页后，他可以按下一页按钮并填充下一页。

对于第一页，我在 HMTL 中构建了一个表单(名为 pageOneForm)，其中包含不同的文本输入字段，标记为 required，并在相对 Controller 我正在做这个 watch :

$scope.$watch('pageOneForm.$valid', function(validity) {
      ModelData.actualPageCompleted = validity;
})

它的作用就像一个魅力。我的模型 (ModelData) 已更新。

我试图将相同的逻辑应用于应用程序的以下部分，即第二页。用户必须从 2 个不同的单选按钮组中选择两个选项，而不是输入文本。 所以我通过 ng-repeat 在 html 中构建了一个按钮列表:

<div ng-Controller="PageTwo" ng-show='data.actualPage == 2'>
    <form  name="pageTwoForm">
        <h3>General Information > Knowledge About </h3>
        <div>
        <b>User</b>
        <div ng-repeat="option in userOptions">
            <input type="radio" name="userGroups" ng-model="data.knowledgeAboutUser" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
        </div>


        <div ng-repeat="option in targetGroupUserOptions">
            <input type="radio" name = "targetUserGroup" ng-model="data.knowledgeAboutTargetGroup" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
        </div>
    </div>
</form>

我已经在其 Controller 中实现了与上面相同的代码:

$scope.$watch('pageTwoForm.$valid', function(validity) {
      ModelData.actualPageCompleted = validity;
})

但显然它不起作用，并且在我的模型中 actualPageCompleted 始终为真......我究竟做错了什么？谢谢

Answer 1

我尽力创建一个带有一些虚拟数据的 Controller ，以便让 fiddle 与您的示例代码一起工作。 Here is the fiddle您需要强制 $digest 循环在单选按钮的 ng-click 上更新表单的有效性状态(请参阅 this SO post for more details )，这就是该方法的原因

    $scope.forceDigest = function(){
        setTimeout(function(){ $rootScope.$$phase || $rootScope.$apply(); });
    };

是必要的。或者，您可以摆脱方法调用并取消注释 html 代码

    <h3 ng-show="false">{{data.knowledgeAboutTargetGroup}}</h3>
    <h3 ng-show="false">{{data.knowledgeAboutUser}}</h3>

在 fiddle 中强制表单对象也更新。

并且我会确保 ModelData.actualPageCompleted 不会保留其在 pageOneForm.$valid 变为 true 并被设置时的真实值。

我希望这有帮助!