Angularjs，检查是否已选择表单中的单选按钮答案

【问题标题】：Angularjs, checking if radio buttons in form have been selectedAngularjs，检查是否已选择表单中的单选按钮
【发布时间】：2014-05-31 16:22:00
【问题描述】：

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

对于第一页，我在 HMTL 中构建了一个表单（名为 pageOneForm），具有不同的文本输入字段，标记为 required，并且在相关控制器中我正在执行此操作：

$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>

我已经在其控制器中实现了与上面相同的代码：

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

但显然它不起作用，在我的模型中 actualPageCompleted 总是正确的...... 我究竟做错了什么？谢谢

【问题讨论】：

您是否尝试“观察”变量，以便当它发生变化时，您知道您获得了一个新值？

标签： javascript forms angularjs validation

【解决方案1】：

我尽我所能创建一个带有一些虚拟数据的控制器，以便让你的示例代码工作起来。 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>

在小提琴中强制表单对象也更新。

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

我希望这会有所帮助！

【讨论】：