[Fixed] Looking for ngFor and function with arguments at the same time examples ie Stackblitz

Issue

I am working on a project where I had a ngFor with the same input repeating each day.

<div *ngFor="let day of days">
  <form (ngSubmit)="onSubmit()" #newForm="ngForm" >
    <label for="price">Price:</label>
    <input type="number" id="price" name="price" [(ngModel)]="model.price" #price="ngModel">
  </form>
</div>
<button class="button" type="submit">Submit</button>

I am confused on function with parameters. Is there any example I can see because on my project, if I modify an input, the 2 others change, but on Stackblitz, I have 3 distincts input.
Well, I don’t put the ngModel in it but the idea is there.

Why on my project, do I have the 3 same inputs? I might have never understood the function with arguments if so.

In my ts file:

  form: FormGroup;
  newForm: FormGroup;
  calendars: any[];
  calendar: any[];
  today = Date.now();
  days: any[];
  price: number;

  ngOnInit(): void {
    this.form = new FormGroup({});
    this.newForm = new FormGroup({});

    this.calendars = [{ start: "", end: "" }];

    this.days = [
      { name: 1 },
      { name: 2 },
      { name: 3 }
    ];

    this.price = 1;
  }

  addCalendar() {
    this.calendars.push(this.calendar);
    console.log(this.calendars);
  }

  removeCalendar() {
    if (this.calendars.length > 1) {
      this.calendars.pop();
      console.log(this.calendars);
    }
  }

  model = new Product(18);

  onSubmit() { 

    console.log(this.newForm.value);
    }

Edit: I included my code directly.

Solution

Hello Sam Bath I am submitting my answer If something need to change then let me know.

so if you using #newForm="ngForm" then no need to declare in ts file.
after that just add price key in your day array like

this.days = [
  { name: 1, price: 0 },
  { name: 2, price: 0 },
  { name: 3, price: 0 }
];

after that just add this (ngSubmit)="onSubmit(newForm.value)" in form tag.
In input filed add [(ngModel)]="day.price" to set value on specific price key.

In ts file On submit function add parameter you want

onSubmit(value: any) { 
    console.log(value);
}

Here is full Code

HTML

<form (ngSubmit)="onSubmit(newForm.value)" #newForm="ngForm" >
<div *ngFor="let day of days; let i = index">
    <label for="price">Price:</label>
    <input type="number" id="price{{i}}" name="price{{i}}"    <!-- don't forgot to add name and id with index -->
    [(ngModel)]="day.price">
</div>
<button class="button" type="submit">Submit</button>
</form>

TS

  // form: FormGroup;          // no need to add this
  // newForm: FormGroup;     // no need to add this
  calendars: any[];
  calendar: any[];
  today = Date.now();
  days: any[];
  // price: number;      // no need to add this

  ngOnInit(): void {
    // this.form = new FormGroup({});      // no need to add this
    // this.newForm = new FormGroup({});   // no need to add this

    this.calendars = [{ start: "", end: "" }];

    this.days = [
      { name: 1, price: 0 },
      { name: 2, price: 0 },
      { name: 3, price: 0 }
    ];

    // this.price = 1;
  }

  addCalendar() {
    this.calendars.push(this.calendar);
    console.log(this.calendars);
  }

  removeCalendar() {
    if (this.calendars.length > 1) {
      this.calendars.pop();
      console.log(this.calendars);
    }
  }

  model = new Product(18);

  onSubmit(value: any) { 
    console.log(value);
  }