Angular 8: перед загрузкой файла появляются сообщения об ошибках проверки файла

Question

У меня есть реактивная форма в Angular 8 для загрузки файла. Я использовал собственный валидатор, а также встроенный валидатор. Проблема в том, что, когда я нажимаю кнопку загрузки, прежде чем файл будет выбран для загрузки / выгрузки, появляются оба сообщения об ошибке проверки. Я также попытался использовать опцию updateOn: blur, но сообщения об ошибках валидации все еще появляются, прежде чем я могу загрузить файл. Как исправить проблему.

<form [formGroup]="uploadForm" (ngSubmit)="onSubmit()">
    <div>
        <label for="fileInput" class="mandatory">Upload File</label>
        <input type="file" id="fileInput" required formControlName="fileInput" name="fileInput" (change)="onFileUpload($event)">
        <div class="input-error-alert" *ngIf="fileInput.invalid  && (fileInput.dirty || fileInput.touched)">
            <div *ngIf="fileInput.errors.required">Please upload file.</div>
            <div *ngIf="fileInput.errors.invalidFile">Please upload Excel file.</div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary" [disabled]="!uploadForm.valid">Submit</button>
</form>

component
swaggerForm = this.formBuilder.group({
    swaggerFile: ['', [Validators.required, fileTypeValidator()]]
});

Also tried, 

swaggerForm = this.formBuilder.group({
    swaggerFile: ['', {validators: [Validators.required, fileTypeValidator()], updateOn: 'blur'}]
});


file-validation.directive.ts
export function fileTypeValidator(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
        let fileName = control.value;
        let ext = fileName.substring(fileName.lastIndexOf('.') + 1);
        return (ext === 'xls' || ext === 'xlsx') ? null : {'invalidFile': true};
    };
}

Answer 1

Ошибка, которую вы получаете, состоит в том, что как только вы щелкаете по полю fileInput, fileInput становится грязным и, поскольку файл требуется по умолчанию, fileInput.invalid имеет значение true.

Одно решение, которое я могу придумать, -

<div class="input-error-alert" *ngIf="isFileUploaded && fileInput.invalid  && (fileInput.dirty || fileInput.touched)">
  <div *ngIf="fileInput.errors.required">Please upload file.</div>
  <div *ngIf="fileInput.errors.invalidFile">Please upload Excel file.</div>
</div>

В компоненте Инициализировать isFileUploaded в false и изменить isFileUploaded в true in Функция onFileUpload