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'，但我只是索引，应该将其设置为 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等于您的表单！

这里的堆叠闪电战：https://stackblitz.com/edit/angular-formgroup-js2xiz

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

1 个答案: