shuyu / angular-material-fileinput

A Html input file enhance base on angular material to file input or file upload.
MIT License
156 stars 74 forks source link

Validation does not work. #31

Open eash-veera opened 8 years ago

eash-veera commented 8 years ago

Validation API does not function.

iposton commented 8 years ago

I had the same problem. try adding name="files" to the directive. like this.

<form name="testForm">
  <lf-ng-md-file-input name="files" lf-maxcount="10" lf-filesize="1MB"></lf-ng-md-file-input>

the name="files" is used in the form error validation call.

<div ng-messages="testForm.files.$error" style="color:red;">

testForm is the name of the form <form name="testForm"> and files is the name of the directive inside the form. Chained together with $error

eash-veera commented 8 years ago

I tried this, but it does not work. This is how the mark up look like, what am i missing ?

<lf-ng-md-file-input style="margin-bottom:50px;" name="files" lf-files="projectImage" lf-required lf-browse-label="Upload Image" lf-placeholder="Pick Image" lf-remove-label="Remove" lf-drag-and-drop-label="Drag and drop your project image here !" drag preview></lf-ng-md-file-input>
                                    <div ng-messages="projectDetails.files.$error" style="color:red;">
                                        <div ng-message="required">Please upload a project image.</div>
                                        <div ng-message="filesize">Image size too large.</div>
                                        <div ng-message="mimetype">This file is not accepted.</div>
                                    </div>
iposton commented 8 years ago
<form name="testForm" layout="column" ng-submit="onSubmit()">
      <lf-ng-md-file-input name="files" lf-files="files05" lf-browse-label="Search" lf-remove-label="Delete" lf-drag-and-drop-label="Drag and Drop here!" lf-maxcount="1" lf-filesize="1MB" lf-totalsize="5MB" drag preview progress multiple type="file" fileread="" accept=".xls,.xlsx,.ods" multiple="false"></lf-ng-md-file-input>
      <div ng-messages="testForm.files.$error" style="color:red;">
          <div ng-message="maxcount">Too many files.</div>
          <div ng-message="filesize">File size too large.</div>
          <div ng-message="totalsize">Total size too large.</div>
          <div ng-message="mimetype">Mimetype error.</div>
      </div>

 <md-button class="md-raised md-button md-ink-ripple md-accent" type="submit" ng-disabled="testForm.$invalid">Submit</md-button> 
  </form>

make sure your form has a name to. and add the angular-messages module to your app. In index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular-messages.js"></script>

app.js

angular.module('myApp', [
    "lfNgMdFileInput",
    "ngMessages"
])
mariusstaicu commented 8 years ago

The upload does not update $dirty or $pristine or $touched fields for element. This way you're forced to show errros all the time on page, not only on submit or change.

smurfyuen commented 6 years ago

Any update on the set $pristine thing?????