Show the data of each loop product in the form as a value and not as a placeholder in Angular

I am printing in Angular a form for each product using *ngFor based on the response of my API that gives me an array of objects with the information of each product.

What happens is that I am trying to have the value of the inputs of each form autocomplete with the product information.

I have tried passing the direct value in the input as value="{{product.description}}" but, Angular apparently ignores it.

Also with [(ngModel)] but, I double the values in each product and in the Angular documentation it says that it is deprecated.

If I pass the value as a placeholder it is shown in the form but, I get an error when trying to obtain the value with updateProductForm.value since the placeholder is not valid.

This is my component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-dashboard-listings',
  templateUrl: './dashboard-listings.component.html',
  styleUrls: ['./dashboard-listings.component.css']
})
export class DashboardListingsComponent implements OnInit {

  constructor(private _apiService: ApiService) { }

  products: any = [];

  ngOnInit() {

    this._apiService.getUserProducts().subscribe(res => {
      this.products = res;
    })

  }

  updateProductForm = new FormGroup({
    sku: new FormControl(),
    part_number: new FormControl(),
    description: new FormControl(),
    price: new FormControl(),
    stock: new FormControl(),
    eta: new FormControl(),
    condition: new FormControl(),
    warranty: new FormControl(),
    package: new FormControl()
  })

  updateProduct(product: any) {
    
    this._apiService.updateProducts(product.id, this.updateProductForm.value).subscribe(() => {
      console.log('Update product!');
      alert(`Update product with ID ${product.id} `)
    });

  }
}

This is my component.html

<form [formGroup]="updateProductForm" *ngFor="let product of products" class="product-wrap">
    <div>
      <span>SKU:</span>
      <input formControlName="sku" type="text" name="" id="" placeholder="{{product.sku}}">
    </div>
    <div>
      <span>Part Number</span>
      <input formControlName="part_number" type="text" name="" id="" placeholder="{{product.part_number}}">
    </div>
    <div>
      <span>Description</span>
      <input formControlName="description" type="text" name="" id="" placeholder="{{product.description}}">
    </div>
    <div>
      <span>Stock</span>
      <input formControlName="stock" type="number" name="" id="" placeholder="{{product.stock}}">
    </div>
    <div>
      <span>Price</span>
      <input formControlName="price" type="number" name="" id="" placeholder="{{product.price}}">
    </div>

    <div>
      <span>ETA</span>
      <input formControlName="eta" type="number" name="" id="" placeholder="{{product.eta}}">
    </div>
    <div>
      <span>Condition</span>
      <input formControlName="condition" type="text" name="" id="" placeholder="{{product.condition}}">
    </div>

    <div>
      <span>Launched</span>
      <span>20-10-2021</span>
    </div>

    <div>
      <input formControlName="warranty" type="text" name="" id="" placeholder="{{product.warranty}}">
    </div>

    <div>
      <input formControlName="package" type="text" name="" id="" placeholder="{{product.package}}">
    </div>

    <div>
      <span>delete</span>
      <span>{{product.id}}</span>
    </div>

    <div>
      <button [disabled]="!updateProductForm.dirty" (click)="updateProduct(product)" type="submit"
        class="btn-blue">Update</button>
    </div>
  </form>

This is how it is printed on the screen :