title: Pass data from html template to component typescript file
body: <p>There is a select option in the below reactive form. <code>post.id</code> will give access to the id of the individual <code>post.name</code><br>
  So lets say the user chooses the second option from the options then <code>post.id</code> will be 2 I want to send this id when the user submits the form.</p>
  
  <p>I have an alternative way of doing it where when the user submits the form then in the <code>contactForm.control.value</code> object I get the name of the option which user chose and I then search the corresponding id in the array of objects <code>this.posts</code>. I want to know if there is another way of doing this where I wont have to search.</p>
  
  <p>HTML file</p>
  
  <pre><code> &lt;form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="apply-form"&gt;
     &lt;select formControlName="post"&gt;
       &lt;option ngFor="let post of posts" value="{{post.name}}"&gt;
       {{post.name}}
       &lt;option&gt;
       &lt;/select&gt;
   &lt;button&gt;Submit&lt;/button&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>TS file</p>
  
  <pre><code>     export component XXX {
       posts: any;
        ngOnInit() {
        this.posts = this.auth.getData();
      }
  
     onSubmit() {
   //need the post.id here
     this.auth.apiRequest(post.id, this.contactForm.value) {
      }
    }
  }
  </code></pre>