Невозможно динамически отключить FormArray From Controller (Angular 5) - PullRequest
Новая
       25

Невозможно динамически отключить FormArray From Controller (Angular 5)

0 голосов
/ 22 марта 2019

Что я хочу сделать, так это то, что при открытии страницы значения будут устанавливаться в некоторые входы FormArray, а затем динамически отключать эти входы (например, заявитель, бенефициар), однако я не могу выполнить отключение.

Моя форма: 

let form = new FormGroup({
      basicInfoForm: this.formBuilder.group({
        applicant_custno :'',
        c_loan_agr_no :'',
        applicant : this.formBuilder.array(
          [this.formBuilder.control('')]
        ),
        lc_currency :'',
        lc_amount :'',
        advice_expiry_date :'',
        beneficiary_custno :'',
        beneficiary: this.formBuilder.array(
          [this.formBuilder.control('')]
        )
      })
})

Мой HTML: 

<div class="form-group" formArrayName="applicant">
  <div *ngFor="let appAddr of applicant.controls; let i=index">
      <div class="d-flex">
          <label class="control-label required-field col-6 mr-1" for="applicant.{{i+1}}">Applicant Address.{{i+1}} </label>
          <button type="button"  class="btn btn-danger" (click)="addCol('applicant')">+</button>
      </div>
      <div class="form-inline">
          <input type="text" class="form-control col-10" [formControlName]="i">
          <button type="button" class="btn btn-danger" *ngIf="i > 0"  (click)="delCol('applicant',i)">-</button>
      </div>
  </div>
</div>

после установки значения: рис

Мой код: 

this.basicInfoForm = this.form.controls.basicInfoForm;

(<FormArray>this.basicInfoForm.get('applicant')).controls.forEach(control => {
          console.log("appli");
          control.disable();
        });

В консоли я вижу, что «appli» печатается 3 раза (поскольку у меня есть три входа «заявителя»), однако «control.disable ()» не работает.

Кто-нибудь может помочь? Спасибо.

1 Ответ

0 голосов
/ 22 марта 2019

В вашем коде есть некоторые ошибки.

Первая из них: 

<div class="form-group" formArrayName="applicant">
  <div *ngFor="let appAddr of applicant.controls; let i=index">
      <div class="d-flex">
          <label class="control-label required-field col-6 mr-1" for="applicant.{{i+1}}">Applicant Address.{{i+1}} </label>
          <button type="button"  class="btn btn-danger" (click)="addCol('applicant')">+</button>
      </div>
      <div class="form-inline">
          <input type="text" class="form-control col-10" [formControlName]="i">
          <button type="button" class="btn btn-danger" *ngIf="i > 0"  (click)="delCol('applicant',i)">-</button>
      </div>
  </div>
</div>

Это значение formControlName в ваших входных данных. Вы установили 'i', но я толькоиндекс, вы должны были установить его на appAddr

После этого, возможно, это должно сработать .. Мне не удалось добавить его в стекаблиц, так что попробуйте это!

РЕДАКТИРОВАТЬ: так что мне удалось добавить его на stackblitz!Поэтому, чтобы заставить его работать, вам нужно добавить в свой FormArray новую группу FormGroup с пустым элементом управления: 

applicant: this.formBuilder.array(
      [this.formBuilder.group({
        app: this.formBuilder.control('')
      })]
    )

А затем в вашем html должно быть что-то вроде этого: 

<div [formGroup]="ClientForm" >
  <div class="form-group">
    <div *ngFor="let appAddr of ClientForm.get('applicant').controls; let i=index">
      <div class="d-flex">
        <label class="control-label required-field col-6 mr-1" for="applicant.{{i+1}}">Applicant Address.{{i+1}} </label>
        <button type="button" class="btn btn-danger" (click)="addCol('applicant')">+</button>
      </div>
      <div class="form-inline" [formGroup]="appAddr">
        <input type="text" class="form-control col-10" formControlName="app">
        <button type="button" class="btn btn-danger" *ngIf="i > 0" (click)="delCol('applicant',i)">-</button>
      </div>
    </div>
  </div>
</div>

С ClientForm, равным вашей форме!

Stackblitz здесь: https://stackblitz.com/edit/angular-formgroup-js2xiz

...