Bind Array Data with the Reactive Form

Question

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 should give 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>
  <select formControlName="price">
    <option *ngFor="let model of models">{{ model.price }}</option>
  </select>
  <button type="submit">Submit</button>
</form>

This is my TS :

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

@Component({
  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() {
    this.initFactureForm();
  }

  initFactureForm() {
    this.factureForm = this.formBuilder.group({
      model: [""],
      price: [""],
    });
  }

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

I'm lost. Thank you in advance :)

Nayak · Accepted Answer · 2020-05-22 04:34:18Z

2

As you require to change the price on the change of model, you might need to set the price when the model changes. And you won't need a dropdown for the price too, as it's dependant on the model.

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

initFactureForm() {
  this.factureForm = this.formBuilder.group({
    model: [""],
    price: [""],
  });

  // Look for changes to the model form-control
  this.factureForm.get('model').valueChanges.subscribe(newValue => {
    // newValue will be holding the 'model' attribute of the selected model
    // Searching the models array for the item with the selected model name
    const selectedModel = this.models.find(item => item.model === newValue);
    // If the item is found in the array,
    // then set the price of the model item to the price form-control.
    // If not found, set price to ''
    if (selectedModel) {
      this.factureForm.get('price').setValue(selectedModel.price);
    } else {
      this.factureForm.get('price').setValue('');
    }
  });
}

edited May 22, 2020 at 4:34

answered May 21, 2020 at 5:54

Nayak

7626 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheScripterX Over a year ago

It's working ! Can you please explain the method that you used in TS file (item => item.model === newValue) ? Thank you so much for your Help :)

Nayak Over a year ago

I have added some comments to the code. See if that helps. If something is still not clear, please let me know.

Soham · Accepted Answer · 2020-05-21 05:36:18Z

0

I think [ngValue] is missing.

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

answered May 21, 2020 at 5:36

Soham

7253 silver badges19 bronze badges

1 Comment

TheScripterX Over a year ago

Thank you for the help, I tried it, but it's not what I'm looking for :) I was looking to change the price on the change of model :) Thank you again, I found it with @Nayak solution's

Collectives™ on Stack Overflow

Bind Array Data with the Reactive Form

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related