CODEWITHSUNDEEP
angulartypescript
PGH
PGH

Reputation: 2204

To display selected object values in the input field

I have an JSON file called customers, I am displaying the customers in the dropdown, In the dropdown when i choose the particular customer,How can i display the details of the selected customer in the input fields like this:

enter image description here

HTML

<mat-form-field>
  <mat-select placeholder="Select Customer">
    <mat-option *ngFor="let customer of customers" [value]="customer.id">
      {{customer.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
    <input matInput placeholder="Name" matInput >
</mat-form-field>
<mat-form-field>
   <input matInput  placeholder="Email" matInput >
</mat-form-field>

TS

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contacts.service';
import { ICustomer } from '../models';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  public customers: ICustomer;
  constructor(private myService: ContactService) { }

  public async ngOnInit(): Promise<void> {
    this.customers = await this.myService.getCustomers('');
  }


}

Services file(contacts.service.ts)

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ICustomer } from './models';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ContactService {
  private baseUrl: string = '../../assets/customers.json';

  constructor(private http: HttpClient) { }


  public getCustomers(id: string): Promise<ICustomer> {
    const apiUrl: string = '../../assets/customers.json';

    return this.http.get<ICustomer>(apiUrl + id).toPromise();
  }

}

DEMO

Upvotes: 1

Views: 3152

Answers (2)

Hien Nguyen
Hien Nguyen

Reputation: 18975

I update your code with change event of mat-select

<div class="main-div">
<mat-form-field>
  <mat-select placeholder="Select Customer" (selectionChange)="update($event)">
    <mat-option *ngFor="let customer of customers" [value]="customer.id">
      {{customer.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
    <input matInput placeholder="Name" matInput [(ngModel)]= "name">
</mat-form-field>
<mat-form-field>
   <input matInput  placeholder="Email" matInput [(ngModel)]= "email">
</mat-form-field>

</div> 

export class ListComponent implements OnInit {
  public customers: ICustomer;
  name: any;
  email: any;
  constructor(private myService: ContactService) { }

  public async ngOnInit(): Promise<void> {
    this.customers = await this.myService.getCustomers('');
  }

  update(event){
    debugger;
    //alert(event.value)
    //alert(JSON.stringify(this.customers))
    let customer = <Array<any>>this.customers;
    let sec = customer.filter(c=>c.id == event.value);
    //alert(this.customers[event.value]);
    //alert(JSON.stringify(sec));
    //alert(sec.name)
    this.name = sec[0].name;
    this.email = sec[0].email;
    //alert(JSON.stringify(event));
  }
}

Code here:

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-k9ib58

Upvotes: 1

Nguyen Phong Thien
Nguyen Phong Thien

Reputation: 3387

You need to update the template to this


<div class="main-div">
<mat-form-field>
  <mat-select 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 matInput placeholder="Name" matInput [value]="customer?.name" >
</mat-form-field>

<mat-form-field>
   <input matInput  placeholder="Email" matInput [value]="customer?.email" >
</mat-form-field>

</div>

Upvotes: 3

Related Questions