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

Question

<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="0,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: 0,000</p>
                                      <p class="centerDiv" >Pending: ${{sub}}</p>
                                    </div>

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


  }

Answer 1

首先，在您的 class 中，您已经根据 FormControl 定义了基金，Amt_fund，但是鉴于您使用的是不同的名称，当使用反应式表单时，模型和视图 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="0,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: 0,000</p>
      <p class="centerDiv">Pending: ${{ sub }}</p>
    </div>
  </div>
</form>

Example

Answer 2

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

这个 div 不能有 formControlName，这意味着组件实现 ControlValueAccessor

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

No value accessor for form control with path: 'funder_details -> 0. getting this error while generating dynamic form array

angular

formarray