Как получить доступ к раскрывающимся свойствам выбранного элемента, используя угловую 7 реактивную форму

Question

В следующем примере у меня есть простой выпадающий список, который содержит список клиентов. Когда вы выбираете клиента из выпадающего списка, мне нужно выполнить следующие действия.

1. Выбранное имя клиента должно отображаться в текстовом поле "txtCustomerName".
2. Выбранное имя клиента должно быть отображено в элементе span "spnCustomerId" (я сделал это некоторым способом и хочу убедиться, что я делаю это правильно с Реактивные формы ).

В дополнение к вышесказанному я получаю ошибку "ERROR TypeError: control.registerOnChange is not a function" при загрузке страницы. Я нашел следующий похожий пост на stackoverflow, но не смог найти надежного ответа на вопрос, с которым я столкнулся.

ОШИБКА TypeError: control.registerOnChange не является функцией

ОШИБКА TypeError: 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>

Пожалуйста, смотрите приведенный выше пример в stackblitz

Answer 1

Ошибка возникает из-за того, что вы инициализируете форму с помощью FormBuilder, но в шаблоне присутствуют не все элементы управления (см. Здесь ссылка ).

Попробуйте это:

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 2

Извините, ответы неверны.Смотрите разветвленный стек

Вы говорите Angular, что selectedCustomer является FormGroup

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

Но вы пытаетесь присвоить FormGroup значение в качестве объекта, когдаВы используете select

<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: []
    }) 

Конечно, будьте осторожны при отображении «имени» и «идентификатора» с использованием безопасного оператора, потому что может быть нулевым

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

Answer 3

Попробуй так:

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"/>