时间戳

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

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

问题描述

<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: ['']
    });


  }

标签： angularformarray

解决方案

首先，在您的课程中，您已将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>

例子

推荐阅读