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

Question

请参阅stackblitz 上的完整代码

当将第一列下拉列表修改为Model时，可以观察到第三列显示了模型列表。

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

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

堆叠式

• 你知道为什么在第二列选择"包含"选项时，第三列显示的是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>

更新订阅valueChanges of formGroup我们需要更改函数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..
}
}

Update2newLine函数错误！！！

必须像一样

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