title: Angular 6 mat-form-field with mat-select not selecting any values
body: <p>I am new to Angular 6, and I am working on a project where I am using material design with reactive form which uses form control. So the problem I am facing is that all  other fields are working fine except mat-select, where it properly display the drop-down content but when i select it, the selected values are not reflected in form control.
  And mat-select data are coming from back-end</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;mat-form-field class="example-full-width"&gt;
        &lt;mat-select placeholder="Source City" formControlName="sourceCityControl" required [errorStateMatcher]="matcher"&gt;
          &lt;mat-option *ngFor="let city of cities" [value]="city"&gt;
            {{city.name}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
        &lt;mat-error&gt;
          Source City &lt;strong&gt; Required &lt;/strong&gt;
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  
      &lt;br&gt; &lt;br&gt;
  
      &lt;mat-form-field class="example-full-width"&gt;
        &lt;mat-select placeholder="Destination City" formControlName="destinationCityControl" required [errorStateMatcher]="matcher"&gt;
          &lt;mat-option *ngFor="let city of cities" [value]="city"&gt;
            {{city.name}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
        &lt;mat-error&gt;
          Destination City &lt;strong&gt; Required &lt;/strong&gt;
        &lt;/mat-error&gt;
  
      &lt;/mat-form-field&gt; 
      &lt;!-- other form elements  --&gt;
      &lt;!-- to check form elements --&gt;
      {{profileForm.value | json}}
  </code></pre>
  
  <p>And here is my TypeScript file code:</p>
  
  <pre><code>public cities = [];
  minDate = new Date();
  nextdate = this.minDate.getUTCDate();
  nextmonth = this.minDate.getUTCMonth();
  nextyear = this.minDate.getFullYear();
  maxDate = new Date(this.nextyear, this.nextmonth + 1, this.nextdate);
  host: Oldoffer;
  offerModel: any;
  matcher = new MyErrorStateMatcher();
  constructor(private fb: FormBuilder, private _offerService: 
  OfferRideService, private router: Router, private editService: EditService) 
  { }
  test1: string;
  test2: Date;
  test3: Date;
  profileForm: FormGroup;
  ngOnInit() {
  console.log(this.nextdate);
  this._offerService.getCities().subscribe(data =&gt; this.cities = data);
  this.editService.getHost().subscribe((data) =&gt; {
    this.host = data;
    this.test1 = this.host.date.toString();
    this.test2 = new Date(this.test1.slice(0, 19) + 'Z');
    this.test3 = new Date(this.test2.getFullYear(), this.test2.getUTCMonth(), 
    this.test2.getUTCDate())
    this.profileForm = new FormGroup({
      sourceCityControl: new FormControl('', Validators.required),
      destinationCityControl: new FormControl('', Validators.required),
      dateControl: new FormControl(this.test3, Validators.required),
      seatsControl: new FormControl(this.host.noOfSeats, [Validators.required, 
      Validators.min(1), Validators.max(4)]),
      amountControl: new FormControl(this.host.amount, [Validators.required, 
      Validators.min(0), Validators.max(2000)]),
      acControl: new FormControl(this.host.preference.ac),
      musicControl: new FormControl(this.host.preference.music),
      smokingControl: new FormControl(this.host.preference.smoking),
      petsControl: new FormControl(this.host.preference.pets)
    });
  })
  }//other code omitted
  </code></pre>
  
  <p>Any help and suggestions??
  Thanks ...   </p>