Question

我正在编写一个带有文件选择器的组件，该文件选择器将文件上传到我们的CDN。我正在尝试在此组件上添加一个反应形式以验证图像输入，因此我可以检查文件名/扩展名等，并将其包装在一个表单中，以便我可以保持Angulars验证的好处。

我的组件HTML是

<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>

我的组件代码是

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

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

CustomValidars.imageValidator只会在一分钟内记录输入。

加载组件后，错误消息显示为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.

基本上，我想在我的被动形式中使用文件输入，所以我可以对文件名进行验证。

Answer 1

正如@ibrahim提到它还没有实现，但我遇到了同样的问题并使用hidden字段解决了它。在onFileChange方法集file.name到hidden字段，您可以在其中进行验证。

   <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]
});

Answer 2

<input type="file">的值是只读的，在调用emitModelToViewChange:false时需要设置选项setValue()以避免该错误：

错误DOMException：无法在上设置'value'属性 'HTMLInputElement'：此输入元素接受文件名，该文件名可以只能通过编程将其设置为空字符串。

解决方案：

this.form.get('<name>').setValue(file, {emitModelToViewChange: false});

Answer 3

export class myClass implements OnInit {

  myForm = new FormGroup({
    name: new FormControl(''),
    myFile: new FormControl('')
  })

  onFileChange($event) {

    this.myForm.patchValue({
      myFile: $event.target.files[0]
    })
  }

}

<input type="file" (change)="onFileChange($event)">

对Angular应用程序使用<input type =“file”/>的反应式表单验证

3 个答案: