代码之家 › 专栏 › 技术社区 › Bhrungarajni

如何用静态数据预先填充字段并在单击时使用角度2获取空部分

angular-reactive-forms angular

1

Bhrungarajni · 技术社区 · 8 年前

我在TS中作为静态数据进行了紧急处理,所以现在我希望静态数据被填充到两个部分中。有人能告诉我怎么做或提供任何链接吗? 我对反应形式很陌生,请帮忙。

this.emergencyContactForm.patchValue({
  ContactName: this.Emergencies[0].ContactName,
  Phone: this.Emergencies[0].Phone,
  Relationship: this.Emergencies[0].Relationship,
});
      this.emergencyContactForm = this._fb.group({
      itemRows: this._fb.array([this.createItem()])
    });
  }

我不知道如何将数据提取到字段中。请帮忙

2 回复 | 直到 8 年前

1

Sravan 8 年前

既然你有 emergencies 作为一个 array ,你应该有 multiple formgroup 要到位的实例

为了这个你应该 loop 这个 紧急事件 应该创造 multiple inputs 第一

this.Emergencies.forEach(
emergency => {
  const control = <FormArray>this.emergencyContactForm.get('itemRows')['controls'];
  control.push(this.createItem());
})

for (let entry in someArray) {
  this.emergencyContactForm.get('itemRows')['controls'][i].patchValue({ 
        ContactName: emergency.ContactName, 
        Phone: emergency.Phone, 
        Relationship: emergency.Relationship, 
      }) 

}

这将创建 多输入 数量 elements 在里面 数组 你有

然后在 HTML 您可以这样使用:

<div class="col-lg-12 col-md-12 col-sm-12 col-12 no-padd pt-4" formArrayName="itemRows" *ngFor="let itemrow of emergencyContactForm.get('itemRows').controls;let i = index;" [formGroupName]="i">
   <div>
      <label class="col-lg-4 col-md-4 col-sm-4 col-xs-6">Contact's Name</label>
      <input type="text" placeholder="Contact's Name" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" formControlName="ContactName" 
      />
    </div>
</div>

2

0

Ryan J 8 年前

我可以看到你的静态数据是数组 “紧急情况” 您试图用 “紧急情况” .