動的formArrayを使ってhtmlでフォームを作成する方法

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

私はformArrayName、formGroupName、formControlNameなどを使用する必要はありません解決策を持って

Answer 1

typescriptとなど

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