Question

如何使用动态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>

class

typescript

Answer 1

我得到了解决方案，我不需要使用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>

如何使用动态formArray

1 个答案: