Question

无法在不使用ng-model的情况下从for循环中设置索引值以形成角度控制，有什么方法可以实现？

<div formArrayName="sample" *ngFor="let a of getControls(sampledata, 'sample'); let i = index">
  <div [formGroupName]="i">
    <input type="text" formControlName="index" name="index" value="{{ i }}" 
  />
  <input
      formControlName="dx"
      type="text"
      class="form-control"
    />
  </div>
</div>

//form Group
this.sampledata= new FormGroup({
      sample: new FormArray([this.createArray()])
    });

//Form Array
createArray(){
return this.formBuilder.group({
      dx: null,
      index:null
    })

//Creation of array dynamically
getControls(frmGrp: FormGroup, key: string) {
  return (<FormArray>frmGrp.controls[key]).controls;
}

Answer 1

尝试使用属性绑定

<div formArrayName="sample" *ngFor="let a of sampledata; let i = index">
  <div [formGroupName]="i">
    <input type="text" formControlName="i" name="i" [value]="i" 
  />
  <input
      formControlName="dx"
      type="text"
      class="form-control"
    />
  </div>
</div>

Answer 2

您的代码中有一些遗漏的地方，

由于要处理dynamic input tags，因此需要将unique name赋予formControlName，这可以通过以下代码完成。

PS：要获得价值，您无需添加{{}}。

 <div formArrayName="sample" *ngFor="let a of sampledata; let i = index">
      <div [formGroupName]="index_{{i}}">
        <input type="text" formControlName="index_{{i}}" name="index_{{i}}" value="i"/>
        <input formControlName="dx_{{i}}"  type="text"  class="form-control"  />
      </div>
    </div>

希望这会有所帮助..：）

Answer 3

*ngFor应该在定义formArray名称之后放置。您应该像下面那样更改html，

<div formArrayName="samples">
    <div *ngFor="let a of getControls(sampledata, 'sample'); let i = index"
           [formGroupName]="i">
    <input type="text" formControlName="index" name="index" value="{{ i }}"/>
  </div>
</div>

这应该将i的值绑定到您的formControlName索引。

希望有帮助。干杯

这是stackblitz的工作示例

https://stackblitz.com/edit/angular-cbqtmj

如何使用FormControl在Angular 7中将索引值设置为Form

3 个答案: