Angular - 无法验证单选按钮的形式

Question

我有一个只有 radio 按钮的 form，form 必须在提交前验证（用户必须 select 一些东西）。在用户 select 一个单选按钮之后，应该使用 ngclass 应用一些样式。我有两个问题：
1。出于某种原因，最后一个选项默认为 selected。
2。我无法获得表单验证属性。当我 select 上面的东西时，数据没有刷新。

plunkr

JS:

app.controller('MainCtrl', function($scope) {

  $scope.questionObject = [{
    "body": "abc"
  }, {
    "body": "def"
  }, {
    "body": "aghi"
  } ]
  $scope.selectAnswer=function(number,obj)
  {
    $scope.isChecked=number;
}
});

HTML:

  <div class="form-group" ng-form="form">
    <div class="col-lg-8 col-lg-offset-2 col-sm-12">
      <div class="row" ng-repeat="obj in questionObject track by $index">
        <div class="radio">
          <label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
            <input type="radio"
                  name="optradio" 
                  ng-click="selectAnswer($index,questionObject.correct_answer)"
                  ng-model="radioInput">{{obj.body}}
          </label>
        </div>
      </div>
    </div>
  </div>
  <pre>
   dirty:{{form.$dirty}}
   pristine:{{form.$pristine}}
  </pre>

编辑这是表单输出。永不更新

   {
  "$error": {},
  "$name": "form",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false
}

Answer 1

这样试试。寻找单选按钮的 ng-model 和 ng-required 属性。

<div name="myForm" novalidate ng-form>
    <div class="col-lg-8 col-lg-offset-2 col-sm-12">
      <div class="row" ng-repeat="obj in questionObject track by $index">
        <div class="radio">
          <label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
        <input type="radio" name="optradio" ng-click="selectAnswer($index,questionObject.correct_answer)" ng-model="data.option" ng-value="obj.body" ng-required="data.option == ''">{{obj.body}}
      </label>

        </div>
      </div>
    </div>
  </div>

  <pre>
     dirty:{{myForm.$dirty}}
     pristine:{{myForm.$pristine}}
     $valid:{{myForm.$valid}}
     $invalid:{{myForm.$invalid}}
  </pre>

笨蛋：https://plnkr.co/edit/crpV5QnSGdSv6rUBnTnR?p=preview

Answer 2

对于单选按钮，默认情况下会选中一个。您可以改用复选框并使用 angularjs 控制它们，以便只选中一个。

为此，为每个问题对象提供一个选定的属性，该对象最初为假：

  $scope.questionObject = [{
    "body": "abc",
    "selected": false
  }, {
    "body": "def",
    "selected": false
  }, {
    "body": "aghi",
    "selected": false
  }];

然后当用户选中一个复选框时，您的 selectAnswer 函数可用于确保只选中一个复选框：

  $scope.selectAnswer = function(obj) {
    angular.forEach($scope.questionObject, function(val) {
      if (obj !== val) {
        val.selected = false;
      }
    });
  };

笨蛋：https://plnkr.co/edit/0TBDHJEjDpiIjmhd3AqT?p=preview

Angular - 无法验证单选按钮的形式

Angular - unable to validate form of radio buttons

javascript

forms

angularjs

angularjs-ng-form