Асинхронный валидатор для таблицы

Я пишу сайт на Angular, там должно быть реализовано добавление товара в корзину из таблицы товаров, данные в которую поступают с backend'a. Мне нужно валидировать количество добавляемого товара так, чтобы оно не превышало имеющееся на "складе". Я написала валидатор, но он работает не совсем корректно. Валидатор срабатывает на значения из всех строк таблицы, а не одной конкретной

Прикрепляю имеющийся код таблицы на HTML: `

<h1>Оформление заказа</h1>

<button
  class="btn"
  [routerLink]="['/cart']"

  [fragment]="'fragment'"
>
  Перейти в корзину
</button>


<div class="find"> <h3>Выберите товар</h3> </div>
<div class="search"> <input type="text"  placeholder="Поиск препаратов" [(ngModel)]="toFilter">
  <button class="btn" (click)="filterData()">Поиск</button>
  <button class="btn" (click)="check()">проверка</button>
</div>


<button class="btn" (click) ="add()"> Выбрать товар </button>
<form [formGroup]="form">
<p-table [value]="products"  [(selection)]="productService.prodToMove" styleClass="p-datatable-sm" dataKey="id" [scrollable]="true" scrollHeight="960px">
  <ng-template pTemplate="header">
    <tr>
      <th style="max-width: 200px">

      </th>
      <th style="max-width: 200px">Id</th>
      <th style="max-width: 200px">Название</th>
      <th style="max-width: 200px">Поставщик</th>
      <th pSortableColumn="price" style="max-width: 200px">Цена <p-sortIcon field="price"></p-sortIcon> </th>
      <th style="max-width: 200px">Количество на складе</th>
      <th style="max-width: 200px">Заказать</th>

    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-product >
    <tr>
      <td>
        <p-tableCheckbox  [value]="product"   dataKey="id"  ></p-tableCheckbox>
      </td>
      <td style="max-width: 200px">{{product.id}}</td>
      <td style="max-width: 200px">{{product.medicine.name}}</td>
      <td style="max-width: 200px">{{product.provider.name}}</td>
      <td style="max-width: 200px">{{product.price}}</td>
      <td style="max-width: 200px">{{product.quantityInStock}}</td>
      <td pEditableColumn >
        <p-cellEditor>


          <ng-template pTemplate="input">
            <input  type="number" formControlName="quantity" min="1" max="{{product.quantityInStock}}" [value]="0" [(ngModel)]="product.pickedQuantity">
                            <div *ngIf="form.get('quantity')?.errors?.['tooMany']">
                              <small>Максимальное количество = {{product.quantityInStock}}</small>

                            </div>
            <!--                <div *ngIf="form.get('quantity')?.errors?.['max']">-->
            <!--                  <small>Макс количество превышено</small>-->

            <!--                </div>-->
          </ng-template>
          <ng-template pTemplate="output">
            {{product.pickedQuantity }}
          </ng-template>

        </p-cellEditor>
      </td>
    </tr>
  </ng-template>
</p-table>
</form>`

Код валидатора:

import { AsyncValidatorFn} from "@angular/forms";
import {ProductService} from "./product.service";
import {map} from "rxjs";

export function checkProductsLeftValidator(product:ProductService): AsyncValidatorFn{
  return <AsyncValidatorFn>(control:any) => {

    return product.getProductsSma()
      .pipe(
        map(product=>{
          const prod = product.find(
            prod => prod.quantityInStock == control.value);
          return prod ? {tooMany:true} : null;
        })
      )
  }
}

Метод getProductsSma:

getProductsSma():Observable<Product[]> {
    return  this.http.get<Product[]>('/api/medicinProv')
  }

Кусок кода с typescript'a:

ngOnInit(): void {
    this.scrollableCols = [

    ];
    this.form=this.fb.group({
      quantity: ['', {
        validators: [
          Validators.required
        ],
        asyncValidators: [checkProductsLeftValidator(this.product)]
      }]
    })

[1]: https://i.stack.imgur.com/OqUJP.png работа валидатора