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

Angularjs, checking if radio buttons in form have been selected

本文关键字：表单 单选按钮 选择 检查 是否 Angularjs      更新时间：2023-09-26

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

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

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

它就像一个魔术。我的型号（ModelData）已更新。

我试图将同样的逻辑应用于应用程序的以下部分，即第二页。用户必须从两个不同的单选按钮组中选择两个选项，而不是输入文本。所以我通过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总是正确的。。。我做错了什么？感谢

我尽了最大努力创建了一个带有一些伪数据的控制器，以使其能够处理您的示例代码。这是fiddle你需要强制$digest循环在点击单选按钮时更新你的表单的有效性状态（更多细节请参阅这篇SO文章），这就是为什么方法

    $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变为真并被设置时起保留其真值。

我希望这能有所帮助！

相关文章：