Сбросить форму (Реактивные формы)

Question

Это HTML:

<div class="container">
  <ng-template [ngIf]="userIsAuthenticated">
    <form [formGroup]='form' name="test">
      <div class="form-group">
        <input type="text" class="form-control" name="header" placeholder="Post Header" formControlName="header">
      </div>
      <div class="input-group">
        <textarea class="form-control" rows="3" name="message" placeholder="Post Message" formControlName="message"></textarea>
      </div>
      <div class="form-group">
        <input class="form-control-file" type="file" id="file1" ng-model="test1" (change)="onFilePicked($event)">
      </div>
      <button class="btn btn-success btn-sm" id="postbtn" type="button" [disabled]="!form.valid" (click)="onSavePost()">{{ btnText }}</button>
    </form>
  </ng-template>
</div>

Это еще не все, но я использую это для сброса формы в файле TS:

this.form.reset();

Это сбрасывает все, кроме файла.

Я создал это в то же время, чтобы удалить файл:

<button ng-click="angular.copy(file1)" #filePicker id="file2" type="reset">Remove files</button> Но использование этого не казалось хорошей практикой.

Я также пробовал это в файле ts. this.form.value.file.nativeElement.value = '';

Это похоже на перезагрузку страницы, что не очень хорошо.

Любой совет был бы отличным ПОЖАЛУЙСТА только комментарии.

Answer 1

Начните с привязки вашего ввода к модели avalie с помощью

<input ng-model="test1"> --> <input [(ngModel)]="test1" #fileInput>

И чтобы сбросить его, объявите его как дочерний вид, а затем сбросьте его, как это

@ViewChild('fileInput') fileInput: ElementRef;

resetForm() {
  this.form.reset();
  this.fileInput.nativeElement.value = undefined;
}