required validation does not work with input type file

Question

I am trying to apply the validation on file input type with the use of angular form and form properties like $valid, $invalid, $pristine, $dirty, $touched.

Note: All other validation except file type is working.

Code for html is like below:

<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
    ....
    ....
    ....
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
      <label>File</label>
      <input type="file" name="filetest" class="form-control" ng-model="user.file">
      <p ng-show="userForm.filetest.$invalid && !userForm.filetest.$touched" class="help-block">File is required.</p>
    </div>
    ....
    ....
    ....
</form>

but above snippet is not working. Please help me get out of this issue.

Here is plnkr link for the reference.

Answer 1

Your file input does not have required attribute.

EDIT: You also need to change condition in your ng-class: it should be

'has-error' : userForm.filetest.$invalid && !userForm.filetest.$pristine 

instead of

'has-error' : userForm.email.$invalid && !userForm.email.$pristine

The whole div element should look like this:

<div class="form-group" ng-class="{ 'has-error' : userForm.filetest.$invalid && !userForm.filetest.$pristine }">
    <label>File</label>
    <input type="file" name="filetest" class="form-control" ng-model="user.file" required>
    <p ng-show="userForm.filetest.$invalid && !userForm.filetest.$touched" class="help-block">File is required.</p>
</div>

I think it works as expected after changind the div as mentioned.