title: Create property of object with form, Angular 5
body: <p>I want to create an object for location with two parameters inside it.
  I can create with FormGroup an array or strings, but I don't know how to create an Object with two parameters inside. This is the code I am using for:</p>
  
  <pre><code>bucketForm: FormGroup; // at the top of the class component
  
  ngOnInit() {
      this.initForm();
    }
  
  private initForm() {
      let bucketName = '';
      let bucketLocation = {};
      let bucketObjects = new FormArray([]);
  
      this.bucketForm = new FormGroup({
        'name': new FormControl(bucketName, Validators.required),
        'location': // Here I want to create Location Object with two parameters {id: 'Some random number', name: 'New York'},
        'bucketObjects': bucketObjects
      });
      console.log(this.bucketForm);
    }
  </code></pre>
  
  <p>I get the value form .html file of the component, I have a simple form here and it is the full code I am using:</p>
  
  <pre><code>&lt;form [formGroup]="bucketForm" (ngSubmit)="onSubmit()"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;label for="name"&gt;Bucket Name*&lt;/label&gt;
          &lt;input
            type="text"
            class="form-control"
            id="name"
            formControlName="name"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6"&gt;
          &lt;label for="bucketLocation"&gt;Bucket Location*&lt;/label&gt;
          &lt;select
            class="custom-select d-block w-100"
            id="bucketLocation"
            formControlName="location"&gt;
            &lt;option
              *ngFor="let locationEl of locations" [value]="locationEl.name"&gt;{{ locationEl.name }}
            &lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;button
        type="submit"
        class="btn btn-primary"
        [disabled]="!bucketForm.valid"&gt;Create Bucket
      &lt;/button&gt;
      &lt;button class="btn btn-danger"&gt;Cancel&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>This is my bucket model, I am using array of buckets:</p>
  
  <pre><code>Bucket {
      id: "BucketExample", // string
      name: "BucketExample", // string
      location: Location, // object { id: string, name: string }
      bucketObjects: Array(0)
  }
  </code></pre>
  
  <p>Screenshot: <a href="https://d2ffutrenqvap3.cloudfront.net/items/071z2l0Y3N3a2P25463O/print-scr-bucket.jpg" rel="nofollow noreferrer">https://d2ffutrenqvap3.cloudfront.net/items/071z2l0Y3N3a2P25463O/print-scr-bucket.jpg</a></p>