将指令的功能合并到 Angular 表单验证中答案

【问题标题】：Incorporate directive's functionality into Angular form validation将指令的功能合并到 Angular 表单验证中
【发布时间】：2015-11-24 23:14:23
【问题描述】：

我有两个相关的问题：

首先：我有以下指令，其目的是验证 input[type=file] 是否有效，但我不知道它是如何做的，最重要的是，实际代码是什么意思是，这里是：

angular.module('sccateringApp')
  .directive('fileModel', ['$parse', function($parse) {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              var model = $parse(attrs.fileModel);
              var modelSetter = model.assign;
              element.bind('change', function(){
                  scope.$apply(function(){
                      modelSetter(scope, element[0].files[0]);
                  });
              });
          }
      };
  }]);

就像我说的，我不知道上面的代码实际上做了什么，我从我复制的论坛得到的解释是它验证了一个输入类型文件。它是否正确？（到目前为止，我无法验证它是否有效，因为它不适用于我目前用于验证我的表单的代码）。

第二：拥有下面的表单，使用角度表单验证它不允许点击提交按钮，直到表单内的实际输入符合验证规则（输入类别的名称，并且描述的最大长度应为 144 个字符）。我将指令包含在文件输入中，但是表单的实际 ng-model 忽略了输入类型文件中的要求，只是验证前两个输入是否满足规则。

这是我的表格：

<form method="post" role="form" name="newCategoryForm" ng-submit="submitForm()" enctype="multipart/form-data" novalidate>
                    <div class="row">
                        <div class="row">
                            <div class="col s12">
                                <div input-field>
                                    <input type="text" name="cat-name" id="cat-name" ng-class="{ 'ng-invalid' : newCategoryForm.catname.$invalid && !newCategoryForm.catname.$pristine }"
                                    ng-model="catname" required>
                                    <label>Nombre</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col s12">
                                <div input-field>
                                    <textarea class="materialize-textarea" name="cat-description" id="cat-description" length="144"
                                    ng-model="catdescription" ng-maxlength="144" required></textarea>
                                    <label>Descripción</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col s12">
                                <h6>Imagen de Fondo</h6>
                                <div class="file-field input-field">
                                    <div class="btn pink darken-2 waves-effect waves-light">
                                        <span>Archivo</span>
                                        <input type="file" name="cat-bgimg" id="cat-bgimg"
                                        file-model="variable" required>
                                    </div>
                                    <div class="file-path-wrapper">
                                        <input class="file-path" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-large pink darken-2 waves-effect waves-light center-button" ng-disabled="newCategoryForm.$invalid">Crear Categoría</button>
                </form>

前两个输入得到正确验证，第三个（文件输入）没有得到正确验证，我真的不知道为什么，因为指令包含在输入中（我知道本机，ngModel 不验证文件输入） .

关于如何解决此问题的任何想法或建议？我对 Angular 真的很陌生，所有的教程都没什么用。我有 5 年的 jQuery 工作经验，而过渡到 Angular 一点也不容易。

【问题讨论】：

标签： javascript angularjs forms validation

【解决方案1】：

上面发布的指令用于使提交获取在<input type="file"></input> 中找到的数据。

此外，应该在控制器中初始化一个变量，以便将在表单中找到的值复制到所述变量中，然后需要将该变量作为ng-submit="submitForm() 中的参数发送。

例子：

angular.module('sccateringApp')
  .controller('newSubcategoryController', function (httpcalls, $scope) {
    ...
    $scope.subcategory = [];
    ...
    $scope.submitForm = function(subcategory){
      ...
      $scope.request.insertSubcategory(subcategory);
    }
  });

表单中的每个 ng-model 将是：

<input type="text" ng-model="category.name">

以便在控制器中找到的类别变量获取该值。

【讨论】：