title: How to assign values in an Angular form without an input element or hiding the UI element?
body: <p>I am working on this template-driven form, where I have a dropdown.</p>
  
  <p>The dropdown has an <strong>ID</strong> as value and <strong>Name</strong> as the display value.</p>
  
  <p>When I submit the form, I need both the values <strong>ID</strong> and <strong>Name</strong> to be in the form output</p>
  
  <pre><code>   &lt;mat-form-field&gt;
              &lt;mat-label&gt;State&lt;/mat-label&gt;
              &lt;mat-select [(ngModel)]="data.stateCode" name="StateCode" #yddfyty&gt;
                &lt;mat-option *ngFor="let state of stateOptions" [value]="state.ID"&gt;
                  {{state.name}}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
     &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>After submitting the form, I get a JSON </p>
  
  <pre><code>{
    StateCode: "Option I select in the Dropdown"
  }
  </code></pre>
  
  <p>When I submit the form, I also want the StateName to be in the form output.</p>
  
  <p>How do I assign the StateName selected in the Dropdown, to a model property in the template-driven form?</p>
  
  <p>I can think of a way where we can use an  element and hide the element, Is there any other way?</p>
  
  <p>Is the only way to do it in the Typescript file after submitting? </p>