Question

我有一个名为customers的api，我在下拉列表中显示所有这些客户名称，然后选择特定的客户，我在其他类似字段中显示的是details(selected customer object properties)：

但是我无法读取此值（例如，Ex Name，Email）并返回这些值。
当我登录查看结果时，属性（即名称，电话，电子邮件）值显示为空。

组件代码

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

要解决您的问题，您需要使用反应式表格patchvalue方法来解决此问题。

这是解决方法。

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

Answer 2

您需要添加一个函数来获取user的输入。添加

(input)="emailInput($event.target.value)

to <mat-form-field>

ts : 

 emailInput(input: string){
console.log(`Email ${input}`);
  }

从输入字段读取值

2 个答案: