Angular.js，检查是否已选择表单中的单选按钮

Question

我从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始终为true ...我在做什么错？ 谢谢

Answer 1

我尽力创建一个包含一些虚拟数据的控制器，以使您的示例代码更容易使用。 这是小提琴，您需要强制$ digest循环在ng-click上单选按钮的情况下更新表单的有效性状态（ 有关更多详细信息 ，请参见此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>

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

而且我会确保从pageOneForm.$valid变为true并进行设置起， ModelData.actualPageCompleted不会保留其真实值。

我希望这个对你有用！