如何使用动态FormArray在HTML中创建一个表单,该表单是通过选择多个文件的数量生成的。每个文件都有自己的FormGroup。当我使用formControlName和formGroupName时,它显示错误
AttachComponent.html:45错误错误:formControlName必须与父formGroup指令一起使用。您将要添加formGroup 指令并将其传递给现有的FormGroup实例(您可以在类中创建一个)。
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.webpackJsonp.../../../forms/@angular/forms.es5.js.ReactiveErrors.controlParentException (forms.es5.js:4507)
at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._checkParentType (forms.es5.js:5396)
at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._setUpControl (forms.es5.js:5403)
at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges (forms.es5.js:5322)
at checkAndUpdateDirectiveInline (core.es5.js:10840)
at checkAndUpdateNodeInline (core.es5.js:12341)
at checkAndUpdateNode (core.es5.js:12284)
at debugCheckAndUpdateNode (core.es5.js:13141)
at debugCheckDirectivesFn (core.es5.js:13082)
at Object.eval [as updateDirectives] (AttachComponent.html:49)
我已经把我的代码也放到了屏幕截图中。
<button class="btn btn-primary pull-right" (click)="file.click()" type="button">Select File</button>
<input name="file" #file type="file" multiple="multiple" (change)="onSelectDocument($event)" style="display: none;" />
@Input() dataType;
@Input() reasonBO;
// this function will be called on select file
export class UploadAttachData {
select: boolean;
documentType: string;
description: string;
fileName: string;
boQueryReason: string;
boQueryComments: number;
file: File;
constructor(obj: any) {
this.select = obj && obj.select ? obj.select : false;
this.documentType = obj && obj.documentType ? obj.documentType : '';
this.description = obj && obj.description ? obj.description : '';
this.fileName = obj && obj.name ? obj.name : '';
this.boQueryReason = obj && obj.boQueryReason ? obj.boQueryReason : '';
this.boQueryComments = obj && obj.boQueryComments ? obj.boQueryComments : '';
this.file = obj ? obj : null;
}
}
onSelectDocument(event: any) {
this.documentData = this.generateFormGroupArray(event);
debugger
console.log(this.documentData);
}
generateFormGroupArray(event): FormArray {
const data: FormArray = this.fb.array([]);
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
for (let i = 0; i < fileList.length; i++) {
data.push(this.generateDocuments(fileList[i]));
}
return data;
}
}
generateDocuments(file): FormGroup {
const uploadData = new UploadAttachData(file);
return this.fb.group(this.generateDocumentRule(uploadData));
}
generateDocumentRule(element: any) {
const documentRule: any = {};
documentRule['selected'] = element['selected'];
documentRule['documentType'] = element['documentType'];
documentRule['description'] = element['description'];
documentRule['fileName'] = element['fileName'];
documentRule['boQueryReason'] = element['boQueryReason'];
documentRule['boQueryComments'] = element['boQueryComments'];
documentRule['file'] = element['file'];
return documentRule;
}
<div class="profile-value">
<div class=" col-md-12 col-lg-12 heading-col select-border-b">
<label class="profile-heading active">
<i class="icon-bottom-triangle provile-expand-icon"></i>Attach Document</label>
<button class="btn btn-primary pull-right" disabled="disabled" [disabled]="!enableButtons" (click)="onDeleteAttachedDocuments()"
type="button">Delete</button>
<button class="btn btn-primary pull-right" disabled="disabled" [disabled]="!enableButtons" (click)="onUploadAttachedDocuments()"
type="button">Upload File</button>
<button class="btn btn-primary pull-right" (click)="file.click()" type="button">Select File</button>
<input name="file" #file type="file" multiple="multiple" (change)="onSelectDocument($event)" style="display: none;" />
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="col-sm-12 col-md-12">
<table class="table customer-search-table">
<thead>
<tr>
<th style="width: 50px">Select</th>
<th>Document Type
<span class="red-start width-auto pull-left">*</span>
</th>
<th>Description
<span class="red-start width-auto pull-left">*</span>
</th>
<th>File Name/Comments</th>
<th>BO Query Reason</th>
<th>BO Query Comments</th>
</tr>
</thead>
<tbody *ngIf="documentData">
<tr *ngFor="let document of documentData.controls; let i=index;">
<form>
<td class="prod-col mycheckbox">
<span class="check">
<input type="checkbox" id="document_{{i}}" name="document_{{i}}" (change)="addOrDeleteSelectedRecord(document)">
<label for="document_{{i}}">
<span></span>
</label>
</span>
</td>
<td>
<select>
<option value="">Select Value</option>
<option *ngFor="let data of dataType" [ngValue]="data.key">{{data.value}}</option>
</select>
</td>
<td>
<input type="text" class="form-control" formControlName="document.controls['description']">
</td>
<td> {{document.controls['fileName'].value}} </td>
<td>
<select style="width: -webkit-fill-available">
<option value="">Select Value</option>
<option *ngFor="let data of reasonBO" [ngValue]="data.key">{{data.value}}</option>
</select>
</td>
<td>
<input type="text" class="form-control"> </td>
</form>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:0)
我得到了解决方案,我不需要使用formArrayName,formGroupName,formControlName等等
只需使用[formControl]即
<tbody *ngIf="documentData">
<tr *ngFor="let document of documentData.controls; let i=index;">
<th>
<span class="check">
<input type="checkbox" id="{{i}}" [formControl]="document.controls['selected']">
<label for="{{i}}"><span></span></label>
</span>
</th>
<th></th>
<th><input type="text" class="form-control" [formControl]="document.controls['description']"></th>
<th>{{document.controls['fileName'].value}}</th>
<th>5</th>
<th><input type="text" class="form-control" [formControl]="document.controls['boQueryComments']"></th>
</tr>
</tbody>