关于angular：如何使用动态formArray在html中创建表单

How to make a form in html with dynamic formArray

如何使用动态FormArray在HTML中制作表单，该表单是通过选择多个文件的数量生成的。每个文件都有其自己的FormGroup。当我使用formControlName和formGroupName时，它显示错误

AttachComponent.html：45错误错误：formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup
指令并将其传递给现有FormGroup实例(您可以在您的类中创建一个)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Example:

<input formControlName="firstName">

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)

我已经将我的代码和屏幕截图也放置了。

1 2	<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;" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

@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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<label class="profile-heading active">
<i class="icon-bottom-triangle provile-expand-icon">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;" />

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

class

typescript