Ошибка угловой загрузки пользовательского коврика - PullRequest
Новая
       9

Ошибка угловой загрузки пользовательского коврика

0 голосов
/ 07 февраля 2019

У меня есть форма для загрузки файла в угловом приложении 5. Для которого я хочу отобразить пользовательскую ошибку, если формат файла не совпадает со следующим:

И пользовательдолжно появиться сообщение об ошибке «Принимаются только файлы PDF, Excel, Powerpoint или Audio (wav и wmv)».

Вот мой HTML-код: 

<div class="detail-item">
                                        <span class="upload-btn-wrapper">
                                            <input #file type="file" class="inputfile" name="input-file-preview" (change)="OnchangeFile($event)" />
                                            <span class="fs-btn fs-btn-standard file-selection" (click)="file.click()">{{'DTM.BulletinPublication.browse' | translate}}</span>
                                        </span>
                                        <span class="file-name">
                                            <mat-form-field>
                                                <input id="fileName" matInput placeholder="File Name" formControlName="fileName" readonly="readonly">
                                                <mat-error>{{getErrorMessageForFileFormat()}}</mat-error>
                                            </mat-form-field>
                                        </span>
                                    </div>

Вот метод "onFileChange", используемый в элементе управления fileUpload: 

 OnchangeFile(evt: any): void {
        let files: File[] = evt.target.files;
        let file: File = files[0];
        if (files && file) {
            let isValidFileFormat = this.checkForFileExtention(file);

            this.filename = file.name;
            let reader: FileReader = new FileReader();
            reader.onload = this._handleReaderLoaded.bind(this);
            reader.readAsArrayBuffer(file);
            this.publishBulletinForm.get(BulletinFields.fileName).setValue(file.name);
            this.publishBulletinForm.get(BulletinFields.fileName).updateValueAndValidity();
            if (this.isEdit) {
                this.bulletinFileNameChange();
            }


            if (!isValidFileFormat)
            {
               *this.publishBulletinForm.get(BulletinFields.fileName).setErrors({ 'incorrect': true });*

            }
        }
    }

, а вот код для пользовательского валидатора, который я написал иб: - 

getErrorMessageForFileFormat(): string {
        let me: BulletinsPublishComponent = this;
        let errMsg: string = '';
        if (me.publishBulletinForm.get(BulletinFields.fileName).hasError('required')) {
            errMsg = me.getTranslation('DTM.BulletinPublication.FileTypeRequired');
            this.isFormValid = false;
        }
        else if (me.publishBulletinForm.get(BulletinFields.fileName).hasError('incorrect')) {
            errMsg = me.getTranslation('DTM.BulletinPublication.InvalidFileType');
            this.isFormValid = false;
        }

        me.cd.markForCheck();
        return errMsg;
    }

Независимо от того, что я делаю, оно никогда не отображает сообщение об ошибке. Может кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 13 февраля 2019

Я не знаю, по какой странной причине markForCheck() не работает, но следующие изменения помогли мне показать пользовательскую ошибку при загрузке неверного формата файла. 

if (!isValidFileFormat)
{
    this.publishBulletinForm.get(BulletinFields.fileName).markAsTouched();
    this.publishBulletinForm.get(BulletinFields.fileName).setErrors({ 'incorrect': true });  
}
...