如何使用 angular2 使用静态数据预填充字段并在单击时获取空白部分

Question

我已经在ts中作为静态数据紧急处理了。所以现在我希望将静态数据分为两部分。谁能建议我怎么做或提供任何链接。我对反应形式很陌生，所以请帮忙。

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()])
    });
  }

我不知道如何将数据提取到现场。请帮忙

Answer 1

我可以看到您的静态数据是数组 'Emergency' 并且您正在尝试使用 'Emergencies'[= 修补表单值14=].

Answer 2

因为你有 emergencies 作为 array，你应该有 multiple formgroup 个实例

为此你应该 loop emergencies 并且应该首先创建 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, 
      }) 

}

这将为 array 中 elements 的数量创建 multiple inputs

然后在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>

如何使用 angular2 使用静态数据预填充字段并在单击时获取空白部分

How to prefill the fields with static data and get empty section on click using angular2

angular

angular-reactive-forms