从输入字段中读取值

Question

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

• 但我无法读取这些值（例如姓名、电子邮件）并返回这些值。

• 当我记录查看结果时，属性（即姓名、电话、电子邮件）值显示为 null。

组件代码

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