Добавления свойств к угловой в FormController

Question

https://docs.angularjs.org/api/ng/type/form.FormController

При добавлении формы проверки в загрузочный проект я считаю себя писать эту картину много:

<form name="myForm"> 
    <div class="form-group" 
     ng-class="{ 'has-error' : myForm.email.$invalid && (myForm.$submitted || myForm.email.$touched) }"> 
     <label>Email*</label> 
     <input type="email" 
      class="form-control" 
      name="email" 
      ng-model="checkout.info.customer_email" 
      required /> 

     <div class="help-block" 
      ng-show="myForm.email.$invalid && (myForm.$submitted || myForm.email.$touched)"> 
      <div ng-show="myForm.email.$error.required">This field is required.</div> 
      <div ng-show="myForm.email.$error.email">This email address is not properly formatted.</div> 
     </div> 
    </div> 
</form> 

Я пытался выяснить, есть ли простой способ добавить новое свойство элемента формы контроллера, что-то вроде:

myForm.email.$showError = myForm.email.$invalid && (myForm.$submitted || myForm.email.$touched 

Я мог бы просто создать функцию для этого, но это не совсем чувствует л ike правильное решение, чтобы написать showError(myForm, myForm.email), но, возможно, это намного проще, посмотрев исходный код для FormController

Answer 1

Я не могу конкретно воссоздать ваш код здесь, но лучший способ увидеть объект угловой формы - прикрепить это объект родительского объекта.

В родительском контроллере определяют следующим образом:

  $scope.myFormScope = {}; 
      $scope.myFormScope.showError = function() { 
       if(!!$scope.myFormScope.myForm) { 
        return $scope.myFormScope.myForm.email.$invalid && 
         ($scope.myFormScope.myForm.$submitted || $scope.myFormScope.myForm.email.$touched); 
       } 
      } 

А потом вот что разметка будет выглядеть

  <form name="myFormScope.myForm"> 
      <div class="form-group" 
       ng-class="{ 'has-error' : myFormScope.showError() }"> 
       <label>Email*</label> 
       <input type="email" 
        class="form-control" 
        name="email" 
        ng-model="checkout.info.customer_email" 
        required /> 

       <div class="help-block" ng-show="myFormScope.showError()"> 
        <div ng-show="myFormScope.myForm.email.$error.required">This field is required.</div> 
        <div ng-show="myFormScope.myForm.email.$error.email">This email address is not properly formatted.</div> 
       </div> 
      </div> 
      <input type="submit" /> 
     </form>