Question

我有一个在angular 5应用程序中上传文件的表单。如果文件格式与以下内容不匹配，我想显示自定义错误：

用户应该看到错误消息，“仅接受PDF，Excel，Powerpoint或音频（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>

这是fileUpload控件中使用的“ onFileChange”方法：

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

无论我做什么，都不会显示错误消息。有人可以帮我解决这个问题吗？

Answer 1

我不知道markForCheck()有什么奇怪的原因不起作用，但是以下更改帮助我在上传无效文件格式时显示了自定义错误。

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

Angular File Upload自定义垫错误问题

1 个答案: