Question

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

对于第一页，我在HMTL中构建了一个表单（名为pageOneForm），具有不同的文本输入字段，标记为required，并且在相对控制器I＆＃39中我做这个表：

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

它就像一个魅力。我的模型（ModelData）已更新。

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

构建了一个按钮列表

<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中总是如此...... 我究竟做错了什么？感谢

Answer 1

我尽力创建一个带有一些虚拟数据的控制器，以便使用您的示例代码。 Here is the fiddle你需要强制$ digest周期来更新你的表单的有效状态，点击单击按钮（见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成为真实并且设置完毕时保留其真正价值。

我希望这有帮助！

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

1 个答案: