[英]Incorporate directive's functionality into Angular form validation
我有两个相关的问题:
首先:我有以下指令,其目的是验证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过渡并不是一件容易的事。
上面发布的指令用于使提交者获取在<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">
这样,在控制器中找到的类别变量就可以获取该值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.