使用 FormGroup Angular 为每个用户输入创建一个动态键 8

Question

我有一个表格如下：

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

目标

我想创建一个对象如下：

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

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

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

如何使用 Angular 表单实现此目的？

我已经按照 Medium.com Blog on 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'
        }
  }
]

Answer 1

您只需要将结果映射到一个对象。但是 Reactive Form 会给你一个数组。所以只需编写一个映射函数即可。

在这里，试一试：

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

使用 FormGroup Angular 为每个用户输入创建一个动态键 8

Create a dynamic key per user Input using FormGroup Angular 8

angular

angular-forms

angular-formbuilder

目标

代码片段

示例数据