title: create key value object using angular forms
body: <p>I have a following output from an api:</p>
  <pre><code> {
     
  
   &quot;id&quot;: 81,
      &quot;shortname&quot;: &quot;testing&quot;,
      &quot;fullname&quot;: &quot;test&quot;,
      &quot;address&quot;: &quot;addrtest&quot;,
      &quot;telephone&quot;: &quot;380979379992&quot;,
      &quot;website&quot;: &quot;www.site.com&quot;,
      &quot;sociallinks&quot;: {
          &quot;facebook&quot;: &quot;fb.com&quot;
      },
      &quot;foundationyear&quot;: &quot;1991&quot;,
      &quot;rating&quot;: 1.0
  },
  </code></pre>
  <p>All of it is fine. But now I try to add some data using Angular. Problem is with a social links column. It is saved as a json object in db and key can be a name of a social network and a value link to the page.</p>
  <pre><code>&quot;sociallinks&quot;: {
          &quot;facebook&quot;: &quot;fb.com&quot;
      },
   How to correctly build a form for entering this data? Basicly I need 2 textfields with social network name and page link and then convert those to a json. How to do it correctly? 
  </code></pre>
  <p>Here is my model class:</p>
  <pre><code>export class Buildcompany {
  id?:any;
  shortname?:string;
  fullname?:string;
  address?:string;
  telephone?:string;
  website?:string;
  sociallinks?:string;
  
  foundationyear?:string;
  rating?:number;
  }
  </code></pre>
  <p>My component ts file:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Buildcompany} from &quot;../../models/buildcompany.model&quot;;
  import {BuildcompanyService} from &quot;../../services/buildcompany.service&quot;;
  import {Region} from &quot;../../models/region.model&quot;;
  import {RegionService} from &quot;../../services/region.service&quot;;
  
  @Component({
    selector: 'app-add-buildcompany',
    templateUrl: './add-buildcompany.component.html',
    styleUrls: ['./add-buildcompany.component.css']
  })
  export class AddBuildcompanyComponent implements OnInit {
    buildcompany: Buildcompany={
      shortname:'',
      fullname:'',
      address:'',
      telephone:'',
      website:'',
      sociallinks:'',
      foundationyear:''
    }
    submitted=false;
    constructor(private  buildcompanyService:BuildcompanyService) { }
  
  
    ngOnInit(): void {
    }
  
  
    saveBuildcompany(): void {
      const data = {
        shortname: this.buildcompany.shortname,
        fullname: this.buildcompany.fullname,
        address: this.buildcompany.address,
        telephone: this.buildcompany.telephone,
        website: this.buildcompany.website,
        sociallinks: this.buildcompany.sociallinks,
        foundationyear: this.buildcompany.foundationyear
  
      };
      this.buildcompanyService.create(data)
        .subscribe({
          next: (res) =&gt; {
            console.log(res);
            this.submitted = true;
          },
          error: (e) =&gt; console.error(e)
        });
    }
    newBuildcompany(): void {
      this.submitted = false;
      this.buildcompany = {
        shortname: '',
        fullname:'',
        address:'',
        telephone:'',
        website:'',
        foundationyear:''
  
      };
    }
  }
  </code></pre>
  <p>And my html of a component now it is just a textboxes since I have no idea where to start.</p>
  <pre><code>&lt;div&gt;
    &lt;div class=&quot;submit-form&quot;&gt;
      &lt;div *ngIf=&quot;!submitted&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;title&quot;&gt;Короткое название&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            class=&quot;form-control&quot;
            id=&quot;title&quot;
            required
            [(ngModel)]=&quot;buildcompany.shortname&quot;
            name=&quot;shortname&quot;
          /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;fullname&quot;&gt;Полное название&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            class=&quot;form-control&quot;
            id=&quot;fullname&quot;
            required
            [(ngModel)]=&quot;buildcompany.fullname&quot;
            name=&quot;fullname&quot;
          /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;address&quot;&gt;Адрес&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            class=&quot;form-control&quot;
            id=&quot;address&quot;
            required
            [(ngModel)]=&quot;buildcompany.address&quot;
            name=&quot;address&quot;
          /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;telephone&quot;&gt;Телефон&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            class=&quot;form-control&quot;
            id=&quot;telephone&quot;
            required
            [(ngModel)]=&quot;buildcompany.telephone&quot;
            name=&quot;telephone&quot;
          /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;website&quot;&gt;Сайт&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            class=&quot;form-control&quot;
            id=&quot;website&quot;
            required
            [(ngModel)]=&quot;buildcompany.website&quot;
            name=&quot;website&quot;
          /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;sociallinks&quot;&gt;Соц. сети&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            class=&quot;form-control&quot;
            id=&quot;sociallinks&quot;
  
            [(ngModel)]=&quot;buildcompany.sociallinks&quot;
            name=&quot;sociallinks&quot;
          /&gt;
  
        &lt;/div&gt;
  
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;foundationyear&quot;&gt;Год основания&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            class=&quot;form-control&quot;
            id=&quot;foundationyear&quot;
            required
            [(ngModel)]=&quot;buildcompany.foundationyear&quot;
            name=&quot;foundationyear&quot;
          /&gt;
        &lt;/div&gt;
  
  
        &lt;button (click)=&quot;saveBuildcompany()&quot; class=&quot;btn btn-success&quot;&gt;Сохранить&lt;/button&gt;
      &lt;/div&gt;
      &lt;div *ngIf=&quot;submitted&quot;&gt;
        &lt;h4&gt;Компания сохранена!&lt;/h4&gt;
        &lt;button class=&quot;btn btn-success&quot; (click)=&quot;newBuildcompany()&quot;&gt;Добавить еще&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>