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="$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>

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

首先，在您的班级中，您已将Fund，Amt_fund，per定义为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

Answer 2

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

此div不能具有formControlName，它用于实现ControlValueAccessor的组件

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

2 个答案: