如何在上使用所需的验证 <input type=“file”> 在角度4

Question

文字输入正常。 我使用相同的文件，但无法正常工作。

<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

如果您只想显示/隐藏错误消息，则取决于所选文件

@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;
  }
}