To read values from the input fields

Question

I have an api called customers,I am displaying all these customers names in the dropdown and on selecting to the particular customer, i am displaying is details(selected customer object properties) in the the other fields like this:

• But i am unable to read this values(for ex Name,Email) and return those values.

• When i log see the result, the property(i,e Name,Phone, Email) values are showing as null.

Component CODE

HTML:

<div class="main-div">
<form [formGroup]="addForm">
 <mat-form-field>
   <mat-select formControlName="customer" placeholder="Select Customer" [(ngModel)]="customer">
     <mat-option *ngFor="let customer of customers" [value]="customer">
      {{customer.name}}
     </mat-option>
   </mat-select>
 </mat-form-field>
 <mat-form-field>
   <input matInputformControlName="phone" placeholder="Phone" matInput 
   [value]="customer?.phone" >
 </mat-form-field>
  <mat-form-field>
    <input matInputformControlName="email" placeholder="Email" matInput 
     [value]="customer?.email" >
  </mat-form-field>
    <br>
   <button mat-flat-button  color="primary" (click)="onAdd()">SAVE </button>
  </form>
</div> 

TS:

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<void> {
    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);
  }

}

DEMO

Answer 1

To solve your problem you need to use reactive forms patchvalue method to fix this issue.

Here is solution.

HTML

<div class="main-div">
    <form [formGroup]="addForm">
        <mat-form-field>
            <mat-select formControlName="customer" placeholder="Select Customer" (selectionChange)="onSelect($event.value)" [(ngModel)]="customer">
                <mat-option *ngFor="let customer of customers" [value]="customer">
                    {{customer.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <input matInputformControlName="phone" placeholder="Phone" matInput    [value]="customer?.phone" >
</mat-form-field>
<mat-form-field>
   <input matInputformControlName="email" placeholder="Email" matInput [value]="customer?.email" >
</mat-form-field>
<br>
<button mat-flat-button  color="primary" (click)="onAdd()">SAVE </button>
</form>
</div>

TS

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<void> {
    this.addForm = this.fb.group({
      customer: [''],
      phone: [''],
      email: [''],
    });
    this.customers = await this.myService.getCustomers('');
  }

  public onAdd(): void {
    this.someCustomer = this.addForm.value;
        // this.someCustomer.email = this.addForm.value.email;  
    console.log(this.addForm.value);
  }

  public onSelect(value): void {
    console.log(value);
    this.addForm.patchValue(
      {
        phone:value.phone,
        email:value.email
      }
    )
    // this.addForm.patchValue
  }

}

Forked stackblitz solution