带有路径的表单控件没有值访问器：'funder_details -> 0。生成动态表单数组时出现此错误答案

【问题标题】：No value accessor for form control with path: 'funder_details -> 0. getting this error while generating dynamic form array带有路径的表单控件没有值访问器：'funder_details -> 0。生成动态表单数组时出现此错误
【发布时间】：2020-02-24 19:24:27
【问题描述】：

<div class="tab-content" id="bt-tab_content_1" >
         <div class="tab-pane show active" id="bt-content_1_1" role="tabpanel" aria-labelledby="bt-tab_1_1" formArrayName="funder_details"  *ngFor="let fund of ProgramForm.get('funder_details').controls ; let i =index;" >
            <div class="form-group row"  [formControlName]="i">
                 <div class="col">
                     <div class="form-group">
                        <label for="credit">Select funder</label>
                             <div class=" showcase_content_area">
                               <div class="form-group">
                                  <select id="js-select-example" class="form-control" name="country" formControlName="funder">
                   <option value="Togo">SeaBridge TFX</option>
                   <option value="Guinea-Bissau">Buyer</option>
                    <option value="Laos">Seller</option>
                   <option value="Andorra">Funder</option>
           </select>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="col">
                                          <div class="form-group">
                                            <label for="approve">Amount funded</label>
                                            <input type="text" class="form-control" id="" placeholder="$100,000"   formControlName="funded">
       </div>
       </div>
       <div class="col">
       <div class="form-group">
            <label for="currency">Percentage</label>
                 <input type="text" class="form-control" id="" placeholder="100%" value={{per}}% formControlName="percentage">
        </div>
       </div>
        </div>
                                  
       </div>
                                    <button class="btn btn-primary" (click)="addFunderDetails()" [disabled]="!isDisabled">+ Add Funder</button>
                                    <hr>
                                    <div class="mt-2">
                                      <p class="centerDiv">Total: $100,000</p>
                                      <p class="centerDiv" >Pending: ${{sub}}</p>
                                    </div>

组件.ts

 ngOnInit() {
    this.ProgramForm = this.fb.group({

      funder_details: this.fb.array([]),


  });
}

  addFunderDetails(): void {
    (this.ProgramForm.get('funder_details') as FormArray).push(this.addFunder());


  }

  addFunder(): FormGroup {
    return this.fb.group({
      fund: [''],
      Amt_fund: [''],
      per: ['']
    });


  }

【问题讨论】：

标签： angular formarray

【解决方案1】：

首先在您的课程中，您已将fund,Amt_fund,per 定义为FormControl，但鉴于您使用不同的名称，当使用反应式表单时，模型和视图formControl 名称应相同。

其次，由于您使用 formGroup 数组，因此您必须使用 [formGroupName] 指令而不是 [formControlName]

试试这个：

<form [formGroup]="ProgramForm">
  <div class="tab-content" id="bt-tab_content_1">
    <div
      class="tab-pane show active"
      id="bt-content_1_1"
      role="tabpanel"
      aria-labelledby="bt-tab_1_1"
      formArrayName="funder_details"
      *ngFor="let fund of arrayC.controls; let i = index"
    >
      <div class="form-group row" [formGroupName]="i">
        <div class="col">
          <div class="form-group">
            <label for="credit">Select funder</label>
            <div class=" showcase_content_area">
              <div class="form-group">
                <select id="js-select-example" class="form-control" name="country" formControlName="fund">
                  <option value="Togo">SeaBridge TFX</option>
                  <option value="Guinea-Bissau">Buyer</option>
                  <option value="Laos">Seller</option>
                  <option value="Andorra">Funder</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="form-group">
            <label for="approve">Amount funded</label>
            <input type="text" class="form-control" id="" placeholder="$100,000" formControlName="Amt_fund" />
          </div>
        </div>
        <div class="col">
          <div class="form-group">
            <label for="currency">Percentage</label>
            <input type="text" class="form-control" id="" placeholder="100%" formControlName="per" />
          </div>
        </div>
      </div>
    </div>
    <button class="btn btn-primary" (click)="addFunderDetails()">+ Add Funder</button>
    <hr />
    <div class="mt-2">
      <p class="centerDiv">Total: $100,000</p>
      <p class="centerDiv">Pending: ${{ sub }}</p>
    </div>
  </div>
</form>

Example

【讨论】：

【解决方案2】：

<div class="form-group row"  [formControlName]="i">

这个 div 不能有一个 formControlName，它是用于实现 ControlValueAccessor 的组件

【讨论】：