Bind Array Data with the Reactive Form

While learning Angular, I am stuck on a problem.

I have a form that uses the reactive method.

I have an array “models” with the “price” of each “model”

I would like that when I choose the “model”, it gives me its “price”, and when I validate the form, I receive the chosen model and its price in a :

console.log (this.form.value)

This is my HTML :

<form [formGroup]="factureForm" (ngSubmit)="onSubmitForm()">
  <select formControlName="model">
    <option *ngFor="let model of models">{{ model.model }}</option>
  <select formControlName="price">
    <option *ngFor="let model of models">{{ model.price }}</option>
  <button type="submit">Submit</button>

This is my TS :

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

  selector: "app-relational-data",
  templateUrl: "./relational-data.component.html",
  styleUrls: ["./relational-data.component.css"],
export class RelationalDataComponent implements OnInit {
  factureForm: FormGroup;
  models = [
      model: "Model 1",
      price: 20,
      model: "Model 2",
      price: 50,

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {

  initFactureForm() {
    this.factureForm ={
      model: [""],
      price: [""],

  onSubmitForm() {
    const newFacture = this.factureForm.value;

I’m lost. Thank you in advance :slight_smile: