无法从控制器动态禁用 FormArray（Angular 5）

Question

我想做的是在打开页面时，将值设置到一些 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>

设置值后： pic

我的代码：

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

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

在控制台中我可以看到 'appli' 被打印了 3 次（因为我有三个 'applicant' 输入），但是 'control.disable()' 不起作用。

有人可以帮忙吗？谢谢。

Answer 1

您的代码中存在一些错误。

第一个是：

<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'但i只是索引，你应该设置为appAddr

在此之后，也许它应该可以工作。我没能将它添加到 stackblitz，所以试试这个！

编辑：所以我设法将它添加到 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

无法从控制器动态禁用 FormArray（Angular 5）

Unable to disable FormArray From Controller dynamically(Angular 5)

angular

angular-reactive-forms

formarray