all.
Whenever you select a file with input type=file...see below and then the plunker link:
<form name="myForm">
<label>Enter your name:</label>
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
<br>
<input type="file"
name="myFile"
ng-model="myFile"
required />
<pre>myForm.myName.$error = {{ myForm.$error | json }}</pre>
<div ng-messages="myForm.myFile.$error" style="color:maroon;">
<div ng-message="required">You need to select a file</div>
</div>
<div ng-messages="myForm.myName.$error" style="color:maroon">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
Here's my Plunker: http://plnkr.co/edit/K5LgAXCHLKl4yQ3m6zAs?p=preview
using Angular, and the required attribute doesn't go away and Angular still sees the field as REQUIRED and NOT filled.
Please help.... What am I missing here?
UPDATE: Yes, this question has been asked before but what I'm running into is this:
When I'm testing with the vald-file directive in the "duplicate" question you posted, everything is fine when I select a FILE the "FIRST" time. BUT, when I select a "different" type of file, or another file of the same type, like another RTF, the directive is NEVER FIRED! Meaning, the form remains invalid, the input field DOES NOT clear out and the directive is in LIMBO!!!
I have to physically refresh the page, every time, and start over. This is very frustrating since this "supposed" solution DOES NOT work in real world testing.
So, hence, this is NOT a duplicate and DOES NOT solve my problem. NOTE: I am not yelling when I use CAPS. That is for EMPHASIS to get your attention to the fact that this duplicate is not working.
???? Why does the directive NOT fire every time even when I want to select another file or the same file "again". Yes, I'm a QA testing guru and I will test every conceivable possible thing the USER can and will do and BREAK the code.
UPDATE: 2 -
Sure enough, I went to the plunker example and it DOES NOT WORK.
The example I tried was this:
<div ng-form="myForm">
<input id="userUpload" ng-model="filename" valid-file name="userUpload" required type="file" **accept=".rtf"** />
<button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i> Ok</button>
<p>
Input is valid: {{myForm.userUpload.$valid}}
<br>Selected file: {{filename}}
</p>
</div>
Notice the accept=".rtf" I also tried accept="application/rtf" and when I selected a file OTHER than RTF, I get "VALID FILE ACCEPTED". REALLY?
Why is that?
Here's the result of that selection:
Input is valid: true Selected file: C:\fakepath\Quick Start.odt
So, please explain to me, how this VALID-FILE directive REALLY works when I insert an INVALID file, hmm?
Here's the PLUNKER I used for the test which was listed above as the so-called solution:
