How to use required validation on in angular 4

Question

Text input are working properly. I used same for file but its not working.

<input type="text" name="title" #title="ngModel" ngModel required class="form-control" placeholder="Title Here">
<div *ngIf="title.errors && (title.dirty || title.touched)">
    <span class="help-block error" [hidden]="!title.errors.required"> Title 
      is Required 
    </span>
</div>
<input type="file" #image="ngModel" (change)="fileEvent($event)" 
name="image" ngModel>

Answer 1

If you want just to show/hide error message depend on selected file

@Component({
  selector: 'my-app',
  template: `
    <div>
       <input type="file" (change)="onChange($event)" name="image">
      <div *ngIf="!fileSelected">
      <span class="help-block error" [hidden]="!fileSelected"> 
        File is Required 
      </span>
     </div>
    </div>
  `,
})
export class AppComponent {
  onChange(event) {
    var files = event.srcElement.files;
    console.log(files);
    this.fileSelected = files.length>0;
  }
}