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

Question

Please refer to complete code here at stackblitz

将第一列下拉列表修改为型号时，观察到第 3 列显示型号列表。

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

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

你知道为什么在第二栏选择'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() //This funcrion is WORNG, see update 2
{
   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>

Update 订阅 formGroup 的 valueChanges 我们需要更改函数 newLine 并分两步完成：

newLine()
{
   const group=this.formBuilder.group({
     onValues: [
        { value: "" },
        [Validators.required, Validators.pattern(/^[+-]?\d+(\.\d+)?$/)]
      ],
      ruleTypeValues: [{ value: "" }],
      getType: [{ value: "" }], 
      filterValue: [{ value: "" }]
   })
   group.valuesChange.subscribe((res:any)=>{
     ..here the code
   }
   //or, if we only want to check, e.g. "getType"
   group.get('getType').valueChange.subscribe((res:any)=>{
      ..here the code
   }
   return group;
}

或者，在创建表单之后，例如在 ngOnInit

ngOnInit()
{
    this.formArray.valueChanges.subcribe((res:any)=>{
       ..here the code..
    }
}

Update2换行函数错误！！！

必须像

newLine(){
   const group=this.formBuilder.group({
     onValues: ["",
        [Validators.required, Validators.pattern(/^[+-]?\d+(\.\d+)?$/)]
      ],
      ruleTypeValues: [""],
      getType: [""], 
      filterValue: [""]
   })
   return group
}

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

Angular formControl - set a value in a particular row in the ngfor loop

ngfor

angular

angular-forms

angular6

angular7