Create a dynamic key per user Input using FormGroup Angular 8

Question

I have a form as follows:

Within the dropdown list are certain pre-defined string values. The Sensor's MAC Address input field has a Pattern check regex.

Goal

I wish to create an object as follows:

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

where the MAC is entered by the user and location comes from dropdown list.

Based on a SE Query it is possible to insert values using patchValue but in the example it only patches the values to an existing key.

How Do I achieve this using Angular Forms?

I have followed the Medium.com Blog on Angular-in-Depth to create reactive forms.

code snippet

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

which provides me results as follows:

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

Example Data

[
  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 you are the author of the blog post arent you! I have edited the query with some sample data for the Mac Address and location — Shan-Desai
– Shan-Desai, Commented Jul 29, 2019 at 14:51
So to be clear, you have an array of filters that you want to populate your form with. But the user can still add more filters and once the form gets submitted, you want to read the value as an array? — SiddAjmera
– SiddAjmera, Commented Jul 29, 2019 at 14:53
Actually I do not have any seed data I solely rely on the user to enter the MAC address whilst the locations usually come from a REST call to a backend which just provides an array of location strings. I wish that when the user clicks save, initially I could just console log the desired object, and if it works then send it to the backend via POST — Shan-Desai
– Shan-Desai, Commented Jul 29, 2019 at 15:00
The final form data would be obtained only once the user clicks on the save button. And since filters is implemented as a FormArray it's value would be an array. So you will have to post-process the form value to achieve the desired Object Structure. I don't really think there's any other way. — SiddAjmera
– SiddAjmera, Commented Jul 29, 2019 at 15:08

SiddAjmera · Accepted Answer · 2019-07-29 15:00:49Z

1

You just need to map the results to an Object. But the Reactive Form will give you an array. So just write a mapping function that does that for you.

Here, give this a try:

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

answered Jul 29, 2019 at 15:00

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create a dynamic key per user Input using FormGroup Angular 8

Goal

code snippet

Example Data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Goal

code snippet

Example Data

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related