Angular formControl-在ngfor循环的特定行中设置一个值

Question

Please refer to complete code here at stackblitz

当将第一列的下拉菜单修改为模型时，观察到第三列显示了模型列表。

单击添加行按钮->对于第二行，将第一列下拉列表修改为系统->观察到第二行的第三列下拉列表也更改为系统列表。但是，它也会同时修改其他行的第三列。有没有办法我只能修改第二行的第三列？

所以formControlName在ngFor循环中是相同的，我想观察formControl中的更改，并仅为该行（而不是所有行）更新第三列的下拉值

在stackblitz

• 您知道为什么在第二列中选择'contains'选项时，第三列显示Object对象。首选空白输入值。

• 您还知道如何显示输入框的默认值，即，当页面首次加载/添加新行时，希望显示每个下拉列表中的第一项。

  <form class="form" [formGroup]="form" noValidate>
    <div *ngFor="let row of rows" class="rows">
     <div>
          <select  formControlName="getType">
             <option *ngFor="let val of rootName"
                          [value]="val">
                      {{ val }}
              </option>
           </select>
      </div>
      <div>
           <select formControlName="typeValues">
             <option *ngFor="let val of type"
                [value]="val">
                {{ val }}
             </option>
           </select>
       </div>
       <div *ngIf="getValues.length>0" >
           <select formControlName="onValues">
              <option *ngFor="let val of getValues"
                      [value]="val">
                      {{ val }}
              </option>
            </select>
       </div>
       <div class="row-button">
           <button (click)="addRow()" [title]="'Add row'"> 
           </button>
       </div>
  
   rows = [0];
   this.form
      .get('typeValues')
      .valueChanges.pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(val => {
          this.setValues();
      });
  
    this.form
        .get('getType')
        .valueChanges.pipe(takeUntil(this.ngUnsubscribe))
        .subscribe(val => {
            this.setValues();
        });
     }
  
   setValues() {
      const name = this.form.controls['getType'].value;
      const type = this.form.controls['tpeValues'].value;
      if (name != null && (type === 'is' || type === 'is not')) {
         if (name === 'Model') {
            this.getValues = this.getModelList;
         } else if (name === 'System'){
            this.getValues = this.getSystemList;
         }else if (name === 'OS'){
            this.getValues = this.getOSList;
         }
      } else {
         this.getValues = [];
      }
  }
  
  addRow() {
     this.formDirty = true;
     this.rows.push(this.rows.length);
  }
  

  '

Answer 1

您需要使用一个FormArray。我想你想做一些像

formArray:FormArray=new FormArray([this.newLine()]);

newLine()
{
   return this.formBuilder.group({
     onValues: [
        { value: "" },
        [Validators.required, Validators.pattern(/^[+-]?\d+(\.\d+)?$/)]
      ],
      ruleTypeValues: [{ value: "" }],
      getType: [{ value: "" }], 
      filterValue: [{ value: "" }]
   })
}
addLine()
{
   this.formArray.push(this.newLine())
}
removeLine(index)
{
   this.formArray.removeAt(index)
}

要进行管理，请使用[formGroup]来查看formArray.controls。>

<form class="form" [formGroup]="formArray">
      <div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group" class="rows">
        <div class="clr-select-wrapper">
          <select formControlName="getType">
            <ng-container *ngFor="let val of rootName">
              <option [ngValue]="val">{{ val }}</option>
            </ng-container>
          </select>
        </div>
        <div class="clr-select-wrapper">
          <select formControlName="ruleTypeValues">
            <ng-container *ngFor="let val of ruleType">
              <option [ngValue]="val">{{ val }}</option>
            </ng-container>
          </select>
        </div>
        <div class="clr-select-wrapper" *ngIf="getValues.length > 0">
          <select formControlName="onValues">
            <ng-container *ngFor="let val of getValues">
              <option [ngValue]="val">{{ val }}</option>
            </ng-container>
          </select>
        </div>
        <input
          *ngIf="getValues.length === 0"
          type="text"
          formControlName="filterValue"
          class="text"
          placeholder="sdf"
        />
        <div class="row-button">
          <button  (click)="addLine()">Add row</button>
          <button  (click)="removeLine(i)">Remove row </button>
          <button (click)="addBlock(row)">Add block</button>
        </div>
      </div>
    </form>