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 是必需的。

我能想到的一種解決方案是

<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為假，並改變isFileUploaded為true onFileUpload功能