在以下示例中,我有一个简单的下拉列表,其中包含客户列表。当您从下拉列表中选择客户时,我需要完成以下操作。
- 选定的客户名称应显示在
"txtCustomerName"
文本框中。 - 选定的客户名称应显示在
"spnCustomerId"
span 元素中(我已经以某种方式完成了它,我想确保我是否使用Reactive Forms以正确的方式进行操作)。
除了上述之外,"ERROR TypeError: control.registerOnChange is not a function"
加载页面时出现错误。我在 stackoverflow 上发现了类似的帖子,但我找不到我面临的问题的可靠答案。
错误类型错误:control.registerOnChange 不是函数
错误类型错误:control.registerOnChange 不是函数 --> formControlName
我的组件类看起来像这样
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>