2

我有一个如下表格： 表单用户界面

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

目标

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

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

其中MAC由用户输入并location来自下拉列表。

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

如何使用 Angular Forms 实现这一目标？

我已经关注了Medium.com 上关于 Angular-in-Depth的博客来创建响应式表单。

代码片段

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'
        }
  }
]
4

1 回答 1

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);

于 2019-07-29T15:00:49.777 回答