如何動態更改FormArray中FormControls的名稱

我在我的角度專案中動態添加行，每個行都有三個選擇選單，我需要在組件 ts 檔案中訪問它們的值。
現在選擇選單被命名為Col1, Comparator, Col2. 當我添加另一行時，第二行中的選單名稱相同。那是個問題。如何將其更改為動態命名？就像第 1 行有Col1-a, Comparator-a,Col2-a
第 2 行有Col1-b, Comparator-b,Col2-b

組件html：

<div class="s_form" [formGroup]="form">


    <ng-container formArrayName="block">

        <ng-container *ngFor="let blockForm of block.controls; let j = index">

   
                <div class="block_row" [formGroupName]="j">


        <mat-form-field  [style.width.px]=150 [style.margin-left.px]=10 appearance="fill">
            <mat-select class="select" formControlName="Col1" (click)="getCols()" placeholder="select column 1">
                <mat-option  *ngFor="let i of DfCols" [value]="i" >{{i}}</mat-option>
             </mat-select>
            </mat-form-field>

            <mat-form-field  [style.width.px]=100 [style.margin-left.px]=10 appearance="fill">
                <mat-select class="select" formControlName="Comparator" placeholder="comparator">
                    <mat-option  *ngFor="let com of comparator" [value]="com" >{{com}}</mat-option>
                 </mat-select>
                </mat-form-field>

                <mat-form-field  [style.width.px]=150 [style.margin-left.px]=10 appearance="fill">
                    <mat-select class="select" formControlName="Col2" (click)="getCols()" placeholder="select column 2">
                        <mat-option  *ngFor="let i of DfCols" [value]="i" >{{i}}</mat-option>
                     </mat-select>
                    </mat-form-field>
                    
               
                    <app-button [style.margin-left.px]=0 class="not_used" color="grey" text="test" (btnClick)="test()"></app-button>
                    <app-button [style.margin-left.px]=0 class="not_used" color="salmon" text="Delete condition block" (btnClick)="deleteblock(j)"></app-button>
                    
    </div>

</ng-container>

</ng-container>
<app-button [style.margin-left.px]=0 class="not_used" color="lightblue" text="Add condition block" (btnClick)="addblock()"></app-button>


</div>

組件 ts：

export class FormgroupStrategyComponent implements OnInit {

  DfCols!:any;
  comparator = ['>', '>=', '<', '<=', '==', '!=']


  form = this.fb.group({
      block: this.fb.array([])
  });

  constructor(private fb:FormBuilder, private calculationService: DfCalculationService) { }


  get block() {
    return this.form.controls["block"] as FormArray;
  }

  addblock() {

    const blockForm = this.fb.group({
      Col1: ['', Validators.required],
      Comparator: ['', Validators.required],
      Col2:  ['', Validators.required]
    });
    this.block.push(blockForm)
  }

  deleteblock(blockIndex: number) {
    this.block.removeAt(blockIndex);
  }

uj5u.com熱心網友回復：

您可以只保留一個計數器來為每個組提供唯一的 ID。您可以將每個組嵌套在主組內。

  form = new FormGroup({});

  get groups() {
    return Object.keys(this.form.controls);
  }

  constructor(private fb: FormBuilder) {}

  deleteblock(blockId: string) {
    this.form.removeControl(blockId);
  }

  counter = 0;
  addblock() {
    const id = this.counter  ;
    const blockForm = this.fb.group({
      Col1: ['', Validators.required],
      Comparator: ['', Validators.required],
      Col2: ['', Validators.required],
    });
    this.form.addControl(id.toString(), blockForm);
  }

<form [formGroup]="form">
  <div *ngFor="let group of groups" [formGroupName]="group">
    <mat-form-field>
      <mat-select formControlName="Col1"></mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-select formControlName="Comparator"> </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-select formControlName="Col2"> </mat-select>
    </mat-form-field>

    <button (click)="deleteblock(group)">DELETE</button>
  </div>
  <button (click)="addblock()">ADD</button>
</form>

由于每個組都有自己的 id，因此表單控制元件將擁有自己的命名空間。FormGroup.get()支持字串陣列從嵌套組中獲取控制元件

this.form.get(['2', 'Col1']);

標籤：有角度的 打字稿

上一篇：如何使用字串設定材質圖示？

下一篇：Angularng2-chartsRadarchart編譯startAngle錯誤