Как свалидировать input type=file в Angular 2?

Question

[Alex_proger]

Как можно свалидировать <input class="form-control" type="file"> в Angular 2 ?

Answer 1

[ozknemoy]

смотря как загружается файл. у нас почти во всех кейсах файл грузится сразу на сервер, обратно возвращает строку-урл ее я кидаю в скрытый input у которого стоит required. для других кейсов немного по другому но смысл тот же - скрытый инпут

Comments

[Alex_proger]

Проблема в том что у нас файл достаточно большой и может загружаться продолжительное время... поэтому мы сперва его прикрепляем и при отправке хотим валидировать, естественно у нас есть еще поля, которые мы хотели бы валидировать через стандартную валидацию Ангуляра 2.

[ozknemoy]

какие валидации на файл? размер?

[Alex_proger]

Факт прикрепления файла, размер. Сейчас валидируем прямо в копоненте через внутренний метод и событие change, но хотелось бы узнать, есть ли решение как то свалидировать этот инпут-файл вместе с остальной формой и сохранить валидацию ангуляра из коробки через ngModel.

[ozknemoy]

может подойдет по ситуацию: я использую вот это https://github.com/valor-software/ng2-file-upload и сделал свою обертку этой директиве. валидатор ng2-file-upload отлавливает ошибки если они есть и вызывает this.uploader.onWhenAddingFileFailed . в примере внутри метода я как раз проверяю размер файла, который я задаю снаружи директивы. мне кажется это удобным. пока файл грузится можно продолжить работать с другими полями

@Component({
    selector: 'file-uploader',
    templateUrl: './file-uploader-prioriti.html'
})
@AutoUnsubscribe()
export class FileUploaderComponent {
    @Input() size: number = 2e6;
    @Input() uploaderClass: string;
    @Input() filename: string;
    @Input() url: string = 'file/upload';
    @Input() accept: string = '.jpeg,.jpg,.png';
    @Output() callback: EventEmitter<string> = new EventEmitter();
    uploader: any;
    constructor(public httpService:HttpService,
                private toast:ToastsManager,
                public handleData: HandleData) {


    }

    ngOnInit() {
        this.uploader = this.httpService.uploadFileWithAuth(this.size,this.url,this.filename);
        //после загрузки
        this.uploader.onCompleteItem = (f,i)=> {
            this.callback.emit(this.handleData.getHash(new Date + ''))
        };
        // при ошибке добавления файла
        this.uploader.onWhenAddingFileFailed = (file)=> {
            if(file.size > this.size) {
                // тостик о превышение допустимого размера
                this.toast.error(`Вы превысили макcимально допустимый размер ${Math.floor(this.size/1024)} Кбайт. Ваш файл ${Math.floor(file.size/1024)} Кбайт`, 'Ошибка!', {
                    showCloseButton: true,
                    toastLife: 22e3
                });
            }

        };
        this.uploader.onBeforeUploadItem = (item) => {
            item.withCredentials = false;
        }
    }

}