Угловая пользовательская форма проверки

Question

Я пытался следить за некоторыми учебниками, но не мог понять, что делать.

Я хотел бы добавить подтверждение, что хотя бы один из флажков (потребитель/поставщик) должен быть правдой. Если не верно, отобразите сообщение об ошибке в обоих полях). Что было бы самым простым способом добиться этого?

<form role="form" name="addClientForm" ng-submit="submitForm(addClientForm.$valid)" novalidate> 
     <div class="form-group" ng-class="{ 'has-error' : addClientForm.title.$invalid && !addClientForm.title.$pristine }"> 
      <label>Title</label> 
      <input type="text" class="form-control" placeholder="Enter a title" ng-model="client.title" required> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error' : addClientForm.company.$invalid && !addClientForm.company.$pristine }"> 
      <label>Company</label> 
      <input type="text" class="form-control" placeholder="Enter a company" ng-model="client.company" required> 
     </div> 
     <div class="checkbox"> 
      <label class="i-checks"> 
      <input type="checkbox" ng-model="client.consumer"><i></i> Consumer 
      </label> 
     </div> 
     <div class="checkbox"> 
      <label class="i-checks"> 
      <input type="checkbox" ng-model="client.vendor"><i></i> Vendor 
      </label> 
     </div> 
    </form> 

Controller (модальный контроллер)

angular.module('App') 
    .controller('ModalAddClientCtrl', function ($scope, $modalInstance) { 

    $scope.client = { title: '', company: '', consumer: true, vendor: false }; 

    $scope.submitForm = function(isValid) { 

    }; 

    $scope.ok = function() { 

     $modalInstance.close($scope.client); 

    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
    }); 

Answer 1

Чтобы использовать угловую форму проверки, как вы пытаетесь вы должны установить имя атрибута в поле ввода. Итак, если у вас есть <form name='form'> с <input name='input'>, тогда вы можете использовать form.input.$dirty или form.input.$pristine. Объедините это с ng-if, как и у вас, все просто.

Посмотрите на это fiddle и попробуйте отредактировать значения. Я выполнил проверку в вашей форме. Я отказался от контроллера, условия и сообщения об ошибках могут быть проще, но вы получите эту идею.

См. Сообщение this, которое имеет отличный ответ на использование проверки формы.