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

【问题标题】：How to set index value to Form in Angular 7 using FormControl如何使用 FormControl 在 Angular 7 中将索引值设置为 Form
【发布时间】：2019-09-18 05:34:07
【问题描述】：

在不使用 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;
}

【问题讨论】：

您能否提及您的表单组？
hi @ng-suhas 查看我的问题，它是从组更新的
我已经给出了答案。希望对您有所帮助。

标签： angular angular-reactive-forms

【解决方案1】：

你的代码中有些地方漏掉了，

因为您正在处理dynamic input tags，所以您需要将unique name 提供给formControlName，这可以通过以下代码完成。

P.S : 对于价值，您无需添加{{}}。

 <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>

希望这会有所帮助.. :)

【讨论】：

因为我们的formGroupName 是独一无二的，所以使用相同的formControlName 不会有任何问题，因为我获得了输入的价值
Nope *ngfor 索引值未设置为输入值，如果我们手动添加输入，则它正在获取值

【解决方案2】：

*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

【讨论】：

【解决方案3】：

尝试使用属性绑定

<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>

【讨论】：

my formControlName 只是 index，我需要为其设置 i 的值。
@GaganV 尝试更新答案，您需要每个 formControl 的唯一名称。
没有错误索引值没有设置为输入值，如果我们手动添加输入它正在获取值