title: To read values from the input fields
body: <p>I have an api called <code>customers</code>,I am displaying all these <strong>customers</strong> names in the <strong>dropdown</strong> and on selecting to the particular <strong>customer</strong>, i am displaying is <code>details(selected customer object properties)</code> in the the other fields like this:</p>
  
  <p><a href="https://i.stack.imgur.com/wwgEJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wwgEJ.png" alt="enter image description here"></a></p>
  
  <ul>
  <li><p>But i am unable to read this values(for ex Name,Email) and return those values. </p></li>
  <li><p>When i log see the result, the property(i,e Name,Phone, Email) values are showing as <strong>null</strong>.</p></li>
  </ul>
  
  <blockquote>
    <p>Component CODE</p>
  </blockquote>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="main-div"&gt;
  &lt;form [formGroup]="addForm"&gt;
   &lt;mat-form-field&gt;
     &lt;mat-select formControlName="customer" placeholder="Select Customer" [(ngModel)]="customer"&gt;
       &lt;mat-option *ngFor="let customer of customers" [value]="customer"&gt;
        {{customer.name}}
       &lt;/mat-option&gt;
     &lt;/mat-select&gt;
   &lt;/mat-form-field&gt;
   &lt;mat-form-field&gt;
     &lt;input matInputformControlName="phone" placeholder="Phone" matInput 
     [value]="customer?.phone" &gt;
   &lt;/mat-form-field&gt;
    &lt;mat-form-field&gt;
      &lt;input matInputformControlName="email" placeholder="Email" matInput 
       [value]="customer?.email" &gt;
    &lt;/mat-form-field&gt;
      &lt;br&gt;
     &lt;button mat-flat-button  color="primary" (click)="onAdd()"&gt;SAVE &lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>TS:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup } from '@angular/forms';
  import { ContactService } from '../contacts.service';
  import { MatOptionSelectionChange } from '@angular/material';
  import { ICustomer } from '../models';
  
  @Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css']
  })
  export class ListComponent implements OnInit {
  public addForm: FormGroup;
  public customers: ICustomer;
  public someCustomer: ICustomer;
  
    constructor(private fb: FormBuilder,
                   private myService: ContactService) { }
  
    public async ngOnInit(): Promise&lt;void&gt; {
      this.addForm = this.fb.group({
        customer: [null],
        phone: [null],
        email: [null],
      });
      this.customers = await this.myService.getCustomers('');
    }
  
    public onAdd(): void {
      this.someCustomer = this.addForm.value;
      console.log(this.someCustomer);
    }
  
  }
  </code></pre>
  
  <p><strong><a href="https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-unfnyg?file=src/app/list/list.component.html" rel="nofollow noreferrer">DEMO</a></strong></p>