如何使用 angular 7 反应形式访问下拉选择的项目属性

Question

在下面的示例中，我有一个包含客户列表的简单下拉列表。当您 select 来自下拉列表中的客户时，我需要完成以下操作。

所选客户名称应显示在 "txtCustomerName" 文本框中。
选定的客户名称应显示在 "spnCustomerId" 跨度元素中（我已经以某种方式做到了，我想确定我是否正在这样做以正确的方式使用 Reactive Forms).

除上述之外，我在加载页面时遇到 "ERROR TypeError: control.registerOnChange is not a function" 错误。我在 Whosebug 上发现了类似的 post，但我找不到针对我所面临问题的可靠答案。

ERROR TypeError: control.registerOnChange is not a function

ERROR TypeError: control.registerOnChange is not a function --> formControlName

我的组件 class 看起来像这样

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public myForm: FormGroup;
  public allCustomers: Customer[] = new Array();

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.myForm = this.formBuilder.group({
      selectedCustomer: this.formBuilder.group({
        id: [],
        name:['']
      })
    })

    this.allCustomers.push(new Customer(0, "John"));
    this.allCustomers.push(new Customer(1, "Kumar"));
    this.allCustomers.push(new Customer(2, "Warma"));
    this.allCustomers.push(new Customer(3, "Sabitha"));
  }

  changeCustomer(e) {
    console.log(JSON.stringify(this.myForm.get('selectedCustomer').value));
  }
}

export class Customer {
  public id: number;
  public name: string;

  constructor(cusId: number, cusName: string) {
    this.id = cusId;
    this.name = cusName;
  }
}

我的 html 页面是这样的

<form name="frmMain" [formGroup]="myForm">
  <div>
    <div>
      All customers:
      <select (change)="changeCustomer($event)" formControlName="selectedCustomer">
        <option value="" disabled>Please select</option>
        <option *ngFor="let cus of allCustomers" [ngValue]="cus">{{cus.name}}</option>
      </select>
    </div>
    <br/>
    <div>
      Selected customer id :
      <span id="spnCustomerId">{{myForm.get('selectedCustomer').value.id}}</span>
    </div>
    <div>
      Selected customer name :
      <!-- I need to show selected customer name in below text box -->
      <input id="txtCustomerName" type="text"/>
    </div>
  </div>
</form>

请参阅上例stackblitz

Answer 1

这样试试：

TS:

this.myForm = this.formBuilder.group({
  selectedCustomer: [],
  selectedCustomerName : []
})


changeCustomer(e) {
    console.log(JSON.stringify(this.myForm.get('selectedCustomer').value));
    let name = (this.myForm.get('selectedCustomer').value).name

    this.myForm.patchValue({
      selectedCustomerName : name
    });
  }

模板：

<div>
  Selected customer id :
  <span id="spnCustomerId">{{myForm.get('selectedCustomer').value?.id}}</span>
</div>
<input id="txtCustomerName" type="text" formControlName="selectedCustomerName"/>

Answer 2

发生错误，因为您正在使用 FormBuilder 初始化表单，但并非所有控件都存在于模板中（参见此处 link）。

试试这个：

this.myForm = this.formBuilder.group({
  selectedCustomer: [''],
  name: ['']
})

您可以直接订阅 formControl，而不是添加更改侦听器，如下所示：

this.myForm.get('selectedCustomer').valueChanges
  .subscribe(e => {
    this.myForm.get('name').setValue(e.name);
    })

在模板中：

<input id="txtCustomerName" type="text" formControlName="name"/>

Answer 3

抱歉，答案不正确。参见 forked stackblitz

您对 Angular 说 selectedCustomer 是一个 FormGroup

selectedCustomer: this.formBuilder.group({
        id: [],
        name:['']
      })

但是当您使用 select

时，您正试图将一个对象作为值赋予 FormGroup

<select (change)="changeCustomer($event)" formControlName="selectedCustomer">
        <option value="" disabled>Please select</option>
        <option *ngFor="let cus of allCustomers" 
             [ngValue]="cus">{{cus.name}}</option>
</select>

这是因为你有错误。

解决方案是 selectedCustomer 是一个对象，而不是 FormGroup，是的，FormControl 可以存储一个对象，而不仅仅是一个字符串或一个数字

this.myForm = this.formBuilder.group({
      selectedCustomer: []
    })

当然，使用安全运算符显示 "name" 和 "id" 时要小心，因为可以为 null

<span id="spnCustomerId">{{myForm.get('selectedCustomer').value?.id}}</span>

如何使用 angular 7 反应形式访问下拉选择的项目属性

How to access dropdown selected item properties using angular 7 reactive form

angular

angular7

angular-reactive-forms

angular8