使用 FormControl 填充输入字段 Angular

Question

我有一个输入字段，我需要在其中填充即将到来的数组数据从 API 开始，我使用 FormControl 填充数据但无法实现 same.I 我在控制台上收到响应但无法在 UI 上填充它。下面是我的代码，如果有人可以指导我，因为我已经花了整整 2 天时间并且在 Angular 中是新的。任何人都可以在这里帮助我。

HTML代码：

<div formArrayName="ints" *ngFor="let inCompany of insurance.controls; let i = index">
  <div [formGroupName] = "i">
      <ion-card *ngFor="let eq of ef;let i=index;">
                     
              <ion-item>            
                <ion-input formControlName="iCompany"></ion-input>                  
              </ion-item>
</ion-card>
</div>
</div>

TS代码：

     ionViewWillEnter(){
       this.loadData();     
     }

    ngOnInit() {
    this.sForm = this.formBuilder.group({
      ints: this.formBuilder.array([]),
    })
    }
    
      get ints(): FormArray {
       return this.sForm.get('ints') as FormArray;
      }

     get formGroup(): FormGroup {
      return this.formBuilder.group({
      name: ['justTest'],
     });
}
    
   loadData(){
    this.service.getefDetails(data).subscribe((response: any) => {
          this.ef= response.data;
      var formArray = this.sForm.get('ints') as FormArray;
    for (let i = 0; i < this.ef.length; i++) {
      console.log(this.ef.length, this.ef[i].percentage)
      var chec=this.ef[i].percentage
      formArray.push(this.formGroup);
      formArray.controls[i].patchValue(chec);  
    }
    
    )}
}

数组类型： [{name:"test", percentage: "29"},{name:"abc", percentage: "45"}, {name:"def", percentage: "63"}]

Answer 1

您可以 patchValue 直接使用表单控件来执行此操作。

您当前的设置似乎太复杂了，除非表单中有一堆其他值未在此处显示。

但是，当您从 API 获得响应时，您可以简单地获取响应式表单元素并设置值。

this.suitablityForm.insurance.insuranceCompany.patchValue('VAL_YOU_WANT');

Answer 2

首先，我建议您重新考虑之前评论中提到的方法，您似乎已经把它变得不必要地复杂了。另外，我会考虑重命名你的变量，这很混乱，以后维护起来会很痛苦。

要回答您的问题并在屏幕上打印“离子输入”，请对 HTML 进行以下更改。

您不能将

i 分配给 formGroup，因为它不是分配给索引的 formGroup 类型。

解决方案是分配

这样就会分配一个表单组。为了清楚起见，我再次建议您重命名变量 "insuranceCompany"，因为还有一个名为 "insuranceCompany" 的控件。

这是您的代码的一个工作示例，去掉了 ionic 标签。 https://stackblitz.com/edit/angular-ivy-b3gtly?file=src/app/app.component.ts

希望我说清楚了，希望对您有所帮助。

使用 FormControl 填充输入字段 Angular

Populate Input Field using FormControl Angular

javascript

arrays

ionic-framework

angular