Angular 8 ReactiveForm Тип ввода "файл" не распознает значение на краю - PullRequest
Новая
       12

Angular 8 ReactiveForm Тип ввода "файл" не распознает значение на краю

0 голосов
/ 08 января 2020

Я использую private _fb: FormBuilder для создания своей формы в Angular 8. Моя форма инициализируется следующим образом: 

this.itemForm = this._fb.group({
  title: ['', [Validators.required, this._systemSvc.nonSpaceString]],
  file: ['', Validators.required],
  categories: [''],
  tags: ['']
});

Шаблон 

     <form class="needs-validation" [formGroup]="itemForm" (ngSubmit)="createPost()">
      <div class="form-row">
        <div class="col-md-4 mb-3">
          <div class="form-row mb-3">
            <div class="col-md-12 mb-3">
              <label class="text-primary"><strong>Title</strong></label>
              <input type="text" formControlName="title" class="form-control"
                [ngClass]="{ 'is-invalid': checkError('title') }">
              <div *ngIf="checkError('title')" class="invalid-feedback">
                <div *ngIf="f.title.errors.required">Title is required</div>
                <div *ngIf="f.title.errors.whitespace">Title can't be blank space</div>
              </div>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6 mb-3">
              <label class="text-primary"><strong>Categories</strong></label>
              <select formControlName="categories" class="custom-select">
                <option value="">--Select categories--</option>
                <option value="Funny">Funny</option>
                <option value="Music">Music</option>
                <option value="Adventure">Adventure</option>
              </select>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-12 mb-3">
              <label class="text-primary" for="tags"><strong>Tags</strong></label>
              <div>
                <ng-container *ngFor="let tag of parsedTags;">
                  <a href="" class="mr-1">#{{tag}}</a>
                </ng-container>
              </div>
              <input id="tags" type="text" formControlName="tags" class="w-100"
                (input)="onTagsChange($event.target.value)">
            </div>
          </div>
        </div>
        <div class="col-md-7 mb-3 offset-md-1">
          <div class="form-row mb-3">
            <div class="col-md-12 mb-3">
              <label class="text-primary" for="upload"><strong>Choose file</strong></label>
              <div class="custom-file">
                <label class="custom-file-label" for="upload">Choose file</label>
                <input type="file" class="custom-file-input" formControlName="file" id="upload"
                  (change)="handleFileInput($event.target.files)" accept="audio/*, video/*, image/*"
                  [ngClass]="{ 'is-invalid': checkError('file') }">
                <div *ngIf="checkError('file')" class="invalid-feedback">
                  <div *ngIf="f.file.errors.required">File is required</div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-row mb-3">
            <div class="col-md-12 mb-3">
              <img *ngIf="uploadedFile" src="{{uploadedFile}}" class="w-100" id="previewImg">
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="col-md-2 form-group">
          <button type="button" id="cancelBtn" class="btn btn-primary mr-2" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Post</button>
        </div>
      </div>
    </form>

Все работает хорошо на Firefox и Chrome. Но когда дело доходит до Edge, пользователь выбирает файл, но реактивная форма не распознает выбранный файл. Другие элементы управления, такие как input = text и dropdown, все еще работают в Edge. Форма недействительна и говорит, что только файл пуст. Это снимок формы 

controls: Object
dirty: true
disabled: false
enabled: true
errors: null
invalid: true
parent: undefined
pending: false
pristine: false

root: Object
status: "INVALID"

statusChanges: Object
touched: true
untouched: false
updateOn: "change"
valid: false
validator: null

value: Object
categories: "Funny"
file: ""
tags: "asd"
title: "asd"

1 Ответ

0 голосов
/ 01 мая 2020

У меня была та же проблема, и я решил, что вручную установив проверку на null.

Создать функцию, в которой проверяется, есть ли входной файл или нет, и внутри него используйте ниже: 

this.itemForm.controls['file'].setErrors(null)

Это действительно работает.

...