使用FormGroup Angular 8为每个用户输入创建一个动态密钥答案

【问题标题】：Create a dynamic key per user Input using FormGroup Angular 8使用FormGroup Angular 8为每个用户输入创建一个动态密钥
【发布时间】：2019-07-29 23:00:49
【问题描述】：

我的表格如下：

下拉列表中有某些预定义的字符串值。 Sensor's MAC Address 输入字段有一个模式检查正则表达式。

目标

我希望创建一个对象如下：

{
  'MAC_1': 'location2',
  'MAC_2': 'location3'
}

MAC 由用户输入，location 来自下拉列表。

基于SE Query，可以使用patchValue 插入值，但在示例中它仅修补值到现有键。

如何使用 Angular 表单实现这一点？

我已按照Medium.com Blog on Angular-in-Depth 创建响应式表单。

代码 sn-p

export class TestComponent implements OnInit {
    dynamicForm: FormGroup;

    macPattern = '^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$';

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.dynamicForm = this.formBuilder.group({
            filters: this.formBuilder.array([])
          });
        this.addFilterToFiltersFormArray();
     }


    createFilterGroup() {
        return this.formBuilder.group({
          mac: new FormControl('', Validators.pattern(this.macPattern)),
          loc: []
        });
    }

    get filtersFormArray() {
        return (this.dynamicForm.get('filters') as FormArray);
    }

    addFilterToFiltersFormArray() {
        this.filtersFormArray.push(this.createFilterGroup());
    }

    removeFilterFromFiltersFormArray(index) {
        this.filtersFormArray.removeAt(index);
    }

    getFilterGroupAtIndex(index) {
        return (this.filtersFormArray.at(index) as FormGroup);
    }

    save() {
        console.log(this.dynamicForm.value);
    }
}

这为我提供了如下结果：

{
  filters: [
     {
       mac: AA:BB:CC:DD:EE:FF,
       loc: location_1
     }
  ]
}

示例数据

[
  filters: 
   {
        {
        mac: 'AA:BB:CC:11:22:DD',
        loc: 'urn:epc:iot:Business.1'
        },
        {
        mac: 'AB:23:24:C3:31:23',
        loc: 'urn:epc:iot:Business.3'
        }
  }
]

【问题讨论】：

请分享一些示例数据以供使用。
@SiddAjmera 你是这篇博文的作者，不是你！我已经使用 Mac 地址和位置的一些示例数据编辑了查询
所以要清楚，你有一个过滤器数组，你想用它们来填充你的表单。但是用户仍然可以添加更多过滤器，并且一旦表单被提交，您想将值作为数组读取吗？
实际上我没有任何种子数据，我完全依赖用户输入 MAC 地址，而位置通常来自对后端的 REST 调用，该后端仅提供一组位置字符串。我希望当用户单击保存时，最初我可以控制台记录所需的对象，如果它有效，然后通过 POST 将其发送到后端
只有在用户点击保存按钮后才能获得最终的表单数据。由于filters 被实现为FormArray，它的值将是一个数组。因此，您必须对表单值进行后处理以实现所需的对象结构。我真的不认为有任何其他方式。

标签： angular angular-forms angular-formbuilder

【解决方案1】：

您只需要将结果映射到一个对象。但是反应形式会给你一个数组。因此，只需编写一个映射函数即可。

来，试试看：

const formData = {
  filters: [{
      mac: 'AA: BB: CC: DD: EE: FF',
      loc: 'location_1'
    },
    {
      mac: 'AB:23:24:C3:31:23',
      loc: 'urn:epc:iot:Business.3'
    }
  ]
};

const desiredData = {};
formData.filters.forEach(filter => {
  desiredData[filter.mac] = filter.loc;
})

console.log(desiredData);

【讨论】：