1

我在 Angular 动态表单中要求在单击添加按钮时添加键值对。键和值都应该是可编辑的

a)- 我们可以从主列表中选择键，也可以是自由文本框（如果主列表中没有值，则自动完成应由文本框替换）。

b)- 值应该是一个文本框。

此外，应该有一个附近的保存按钮和删除按钮以及上面的字段来提交或删除它。

根据我们项目中的当前实现，“key”始终是硬编码的，“value”在表单组内是可编辑的。

以动态形式添加新键值对的最佳方法应该是什么？

1-我们是否需要创建一个新的表单组来添加新行？

2-利用当前方法并在同一表单组中扩展其功能

任何方法/线索都将受到欢迎。

4

1 回答 1

0

1 .On 按钮单击创建一个创建表单组并添加到父表单组中的表单数组的函数

  1. 对于这样的放置键值
  let r=this.fb.group({mvl:"keey",sec:"val"});
  1. 将您的输入标记为只读以使其不可食用
foo:FormGroup
constructor(public fb:FormBuilder) {
  this.foo=this.fb.group({
      string  :"",
      number:0,
      common1:this.common,
      common2:this.common,
      multi:this.fb.array([])
    });
}

add()
{
  let r=this.fb.group({mvl:"keey",sec:"val"});
  (this.foo.get("multi") as FormArray).push(r);
}

在你的表单里面放这样的html

 <div formArrayName="multi">
            <div *ngFor="let el of multiForm;let i=index" [formGroupName]="i">

                    <input type="text" matInput placeholder="mvl{{i}}" formControlName="mvl">

                    <input type="text" matInput placeholder="sec{{i}}" formControlName="sec">
            </div>
            <div (click)="add()">add</div>
        </div>
于 2019-02-16T21:12:11.893 回答