Javascript 呈现输入的动态数组
我试图呈现一个动态的FormArray(当点击“+”时,它应该会添加一个新的),但是当我在输入框中放入一些文件时,消息(“Nenhum Arquivo Selecionado”,意思是“文件不存在”)总是停留在屏幕上 但是,如果我检查此.filtermber.get('Documents')上的信息,则该行填写正确 是否有人建议修复此错误 原生动物Javascript 呈现输入的动态数组,javascript,html,angular,Javascript,Html,Angular,我试图呈现一个动态的FormArray(当点击“+”时,它应该会添加一个新的),但是当我在输入框中放入一些文件时,消息(“Nenhum Arquivo Selecionado”,意思是“文件不存在”)总是停留在屏幕上 但是,如果我检查此.filtermber.get('Documents')上的信息,则该行填写正确 是否有人建议修复此错误 原生动物 items: FormArray; filterForm = new FormGroup({ IdProtocolo: new Fo
items: FormArray;
filterForm = new FormGroup({
IdProtocolo: new FormControl(),
Documentos: this.formBuilder.array([ this.createItem() ]
);
ngOnInit() {
this.items = this.filterForm.get('Documentos') as FormArray;
}
createItem(): FormGroup{
return this.formBuilder.group({
filename: '',
filetype: '',
value: ''
})
}
addItem(){
this.items.push(this.createItem());
}
removeItem(index){
if(this.items.length > 1) {
this.items.removeAt(index);
}
}
onFileChange(event: any, index: any) {
let reader = new FileReader();
if(event.target.files && event.target.files.length > 0) {
let file = event.target.files[0];
reader.readAsDataURL(file);
this.items.at(index).patchValue({
filename: file.name,
filetype: file.type,
value: (reader.result as string).split(',')[1]
})
}
}
protocolo.component.html
<div *ngFor="let item of filterForm.value.Documentos; let i = index;">
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-4">
<input type="file" formControlName="Documentos" (change)="onFileChange($event, i)">
</div>
<div class="col-md-8">
<button class="btn btn-success-tce" (click)="addItem()">+</button>
<button class="btn btn-success-tce" (click)="removeItem(i)"style="margin-left: 5px">-</button>
</div>
</div>
+
-
[更新]可能是formArray的错误实现。我在您的模板中看不到formArrayName。我会像这样实现它 在模板中
<p> Dynamic File Form </p>
<form [formGroup]="someForm" (submit)="formSubmit()">
<div formArrayName="documents">
<div *ngFor="let item of files?.controls; let i = index;">
<input type="file" placeholder="Upload file" [formControlName]="i" (change)="onFileChange($event, i)"/>
</div>
</div>
<button type="submit"> Submit </button>
</form>
<button type="button" (click)="addFileControl()"> Add File </button>
这是一个例子。这将为您提供base64格式的输出,但您也可以通过修改来获得文件格式的输出
onFileChange(event, i) {
if (event.target.files && event.target.files.length) {
this.files.controls[i].get('file_item').setValue(event.target.files;);
}
}
注意:-这只是一个粗略的代码,但可以完成以下工作:)
onFileChange(event, i) {
if (event.target.files && event.target.files.length) {
this.files.controls[i].get('file_item').setValue(event.target.files;);
}
}