Question

我在Angular Dynamic Form中有一个要求，在单击添加按钮时添加键值对。键和值都应可编辑

a）-键入我们可以从主列表中选择的键，也可以是一个自由的文本框（如果主列表中不存在该值，则自动完成应替换为文本框）。

b）-值应为文本框。

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

根据我们当前在项目中的实现，“键”始终是硬编码的，而“值”则可以在表单组中进行编辑。

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

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

2-使用当前方法并以相同的形式组扩展其功能

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

Answer 1

1。在按钮上单击创建一个函数，该函数创建表单组并添加到父FormGroup中的表单数组

对于这样的放置键值

  let r=this.fb.group({mvl:"keey",sec:"val"});

将您的输入标记为只读，使其不可食用

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>

在Angular Dynamic Form中添加新的键值对

1 个答案: