Question

目前我想使用指令验证表单的2个字段。当我写“manuel”这个词时，我想要验证的第一个文本字段。然后我想验证加载图像时输入文件是否有效。如果条件满足，我设置为true |根据验证错误。如果文本字段的验证为真，那么

 ngModel.$setValidity('validate', true);

，否则

ngModel.$setValidity('validate', false);

（输入文件相同）

问题是表单永远无效，即使我加载了有效的图像。我可以做什么？。我想解决一个指令中的所有内容，如果有更好的方法来验证输入文件，欢迎提供反馈，但不要求所需的属性，并且需要在同一指令中使用。

 <form class="form-horizontal well" name="form" >
    <input type="text"  ng-model="numero"  class="form-control" validate />
    <input type="file" id='file' ng-model='file'  />
    <button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="form.$invalid" >SEND</button>
  </form>


    var app = angular.module('app', []);

    app.controller('appCtrl', function ($scope) {
    });

    app.directive('validate', function ($timeout) {

        return {
            restrict: 'AE',
            require: 'ngModel', 

            link: function (scope, element, attrs, ngModel) {
              if (!ngModel){
                return;          
              }
              //initially set false validation of form
              ngModel.$setValidity('validate', false);

              ngModel.$parsers.push(function(val){
                if (val=="manuel"){
                  ngModel.$setValidity('validate', true);

                } else {
                  ngModel.$setValidity('validate', false);
                }
                ngModel.$render();
              })

                function bindEvent(element, type, handler) {
                  if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                  } else {
                    element.attachEvent('on' + type, handler);
                  }
                }

                //******************** Validate File *********************//
                //initially set false validation of file
                ngModel.$setValidity('file', false);

                 bindEvent(element[0], 'change', function() {
                  var sNameFile=this.files[0].name;
                  var sExtension=sNameFile.split(".");
                  sExtension=sExtension[sExtension.length-1].toLowerCase();

                      if(sExtension=="gif" || sExtension=="jpg" || sExtension=="jpeg" || sExtension=="png" || sExtension=="bmp"){
                        console.log(" is image")
                         ngModel.$setValidity('file', true);
                         console.log(ngModel)
                      }
                      else{
                        console.log("is not image")
                        ngModel.$setValidity('file', false);
                        element[0].value=null;
                      }
                });

            }
        };
    });

http://jsfiddle.net/07u4muuq/

验证指令中的输入文件（Angular.js）

0 个答案: