Нет доступа к значению для элемента управления формы с путем: 'funder_details -> 0. Получение этой ошибки при создании массива формы Dynami c - PullRequest
Новая
       14

Нет доступа к значению для элемента управления формы с путем: 'funder_details -> 0. Получение этой ошибки при создании массива формы Dynami c

0 голосов
/ 24 февраля 2020 

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


  }

Ответы [ 2 ]

1 голос
/ 24 февраля 2020

Первый В вашем классе вы определили фонд 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>

Пример

0 голосов
/ 24 февраля 2020 
<div class="form-group row"  [formControlName]="i">

Этот div не может иметь formControlName, который предназначен для компонентов, реализующих ControlValueAccessor

...