Angular - невозможно проверить форму переключателей

У меня есть form только с radio кнопками, form должен быть проверен перед отправкой (пользователь должен что-то выбрать). После того, как пользователь выбирает переключатель, некоторые стили должны применяться с использованием ngclass. У меня две проблемы:
1. По какой-то причине последний вариант выбран по умолчанию.
2. Я не могу получить атрибуты проверки формы. Данные не обновляются, когда я выбираю на них что-то.

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
}

javascript forms angularjs angularjs-ng-form
person Alex    schedule 11.12.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте так. найдите атрибуты 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

person Deep    schedule 11.12.2016
comment
Кажется, это меняет статус $invalid только тогда, когда пользователь нажимает на опцию последняя. Но помимо этого $pristine меняется при первом выборе. - person Alex; 11.12.2016
comment
@undroid обновил планкер и ответ, чтобы показать действительный и недействительный статус формы. Дайте мне знать, если у вас есть какие-либо вопросы. - person Deep; 11.12.2016
comment
Да, теперь ваш пример работает. Я не могу заставить эту работу на моей стороне, придется копать глубже. Хотите объяснить логику вашей ng-model манипуляции? - person Alex; 11.12.2016
comment
ng-model — это свойство области, это значение устанавливается в значение ng переключателя, когда выбран конкретный переключатель. Я установил для атрибута ng-required значение true, если свойство ng-model пусто. если ng-модель пуста, это означает, что форма недействительна, и когда пользователь выбирает любой переключатель, значение mg-model будет установлено, и форма станет действительной. - person Deep; 11.12.2016

arrow_upward
0
arrow_downward

С помощью переключателей один из них будет выбран по умолчанию. Вместо этого вы можете использовать флажки и управлять ими с помощью 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

person jtsnr    schedule 11.12.2016