Sử dụng xác nhận biểu mẫu phản hồi với <input type = "file"> cho ứng dụng Góc

Question

Tôi đang viết một thành phần có bộ chọn tệp tải tệp lên CDN của chúng tôi. Tôi đang cố gắng thêm một biểu mẫu phản ứng trên thành phần này để xác thực đầu vào hình ảnh, vì vậy tôi có thể kiểm tra tên tệp/phần mở rộng vv và giữ nó trong một biểu mẫu để tôi có thể giữ các lợi ích của việc xác thực Angulars.

HTML thành phần của tôi là

<form class="mt-4" [formGroup]="form"> 
    <div class="form-group form-inline"> 
    <label class="btn btn-secondary btn-file">Browse 
     <input name="file" type="file" (change)="onChange($event)" formControlName="imageInput" 
    </label> 

    <p *ngIf="file" class="pl-4 align-middle mb-0">{{file.name}}</p> 
    </div> 

    <button type="button" class="btn btn-primary">Upload</button> 
</form> 

Và mã thành phần của tôi đằng sau là

onChange(event: EventTarget) { 
    // file picker code 

    this.form = this.formBuilder.group({ 
     imageInput: [this.file.name, CustomValidators.imageValidator] 
    }); 
} 

Các CustomValidars.imageValidator chỉ mới ghi lại đầu vào vào phút.

Khi các thành phần được tải, hiển thị thông báo lỗi như ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Về cơ bản, tôi muốn sử dụng các tập tin đầu vào ở dạng phản ứng của tôi, vì vậy tôi có thể xác nhận đối với tên tập tin.

Answer 1

Khi @ibrahim đề cập đến nó chưa được triển khai, nhưng tôi có cùng một vấn đề và giải quyết nó bằng cách sử dụng trường hidden. trên onFileChange phương thức thiết lập file.name đến hidden trường, nơi bạn có thể xác thực.

<form class="mt-4" [formGroup]="form"> 
     <div class="form-group form-inline"> 
     <label class="btn btn-secondary btn-file">Browse 
      <input name="file" type="file" (change)="onFileChange($event)"> 
      <input type="hidden" name="fileHidden" formControlName="imageInput"/> <!-- Validation Field --> 
     </label> 

     <p *ngIf="file" class="pl-4 align-middle mb-0">{{file.name}}</p> 
     </div> 
     <button type="button" class="btn btn-primary">Upload</button> 
    </form> 



onFileChange($event) { 
    let file = $event.target.files[0]; // <--- File Object for future use. 
    this.form.controls['imageInput'].setValue(file ? file.name : ''); // <-- Set Value for Validation 
} 
fileName = ''; 
this.form = this.formBuilder.group({ 
     imageInput: [fileName, Validators.required] 
});