Могу ли я использовать реактивные формы в angular с полем ввода, которое обрабатывается отдельно при сохранении и заполнении, чем остальные поля ввода?

В настоящее время я использую форму, управляемую шаблоном, и [(ngModel)]

У меня есть модель продукта, показанная ниже.

    export interface Product {

    title: string;
    price: number;
    category: string;
    imageUrl: string;
    key: string;
    description: string;
    
}

Я также храню в отдельном месте в базе данных, сколько единиц продукта доступно. В настоящее время хранение происходит двумя отдельными службами.

при сохранении/обновлении/создании я использую ту же форму.

ниже я предоставляю компонент productForm..

import { QuantityAvailableService } from './../../quantity-available.service';
import { Router, ActivatedRoute } from '@angular/router';
import { ProductService } from './../../product.service';
import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';
import { take } from 'rxjs/operators';
import { Observable } from 'rxjs';




@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})

export class ProductFormComponent implements OnInit {

  
  categories$: Observable<{}>;
  product: any  = {};
  stockQuantity: any = {};
  id;


  constructor(
    private categoryService: CategoryService,
    private route: ActivatedRoute,
    private productService: ProductService,
    private quantityAvailableService: QuantityAvailableService,
    private router: Router
    ) {
    
    this.categories$ = this.categoryService.getAll().snapshotChanges();

    this.id = this.route.snapshot.paramMap.get('id');
    if (this.id) {
      this.quantityAvailableService.get(this.id).subscribe(data => this.stockQuantity = data);
      this.productService.get(this.id).pipe(take(1)).subscribe(p => {
      return this.product = p;
     });
  }}

  ngOnInit() { }


  save(product) {
    if (this.id) {

      this.productService.update(this.id, product);
      this.quantityAvailableService.update(this.id, this.stockQuantity);

     } else {
       this.productService.create(product);
       this.quantityAvailableService.create(this.id, this.stockQuantity);
      }

    this.router.navigate(['/admin/products']);
  }



  delete() {
    if (!confirm('Are you sure you want to delete this product?')) {  return; }

    this.productService.delete(this.id);
    this.quantityAvailableService.remove(this.id);
    this.router.navigate(['/admin/products']);

  }
}

   <div class="row">
  <div class="col-md-6">
      <form #f="ngForm" (ngSubmit)="save(f.value)">
          
        <div class="form-group">
            <label for="title">Title</label>
            <input #title="ngModel" [(ngModel)]="product.title" name="title" id ="title" type="text" 
                class="form-control" required>
            <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
              Title is required.
            </div>
         </div>
          
          <div class="form-group">
              <label for="price">Price</label>
              <div class="input-group-prepend">
                <span class="input-group-text">$</span>
              <input #price="ngModel" [(ngModel)]="product.price" name="price" id ="price" type="number" 
                 class="form-control" required [min]="0"> 
              </div>
              <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                <div *ngIf="price.errors.required">Price is required.</div>
                <div *ngIf="price.errors.min">Price should be 0 or higher.</div>
              </div>
          </div>
         
          <div class="form-group">
            <label for="quantityAvailable">Quantity available</label>
            <div class="input-group-prepend">
            <input #quantityAvailable="ngModel" [(ngModel)]="stockQuantity" name="quantityAvailable" id 
               ="quantityAvailable" type="number" class="form-control" required [min]="0"> 
            </div>
           <div class="alert alert-danger" *ngIf="quantityAvailable.touched && 
                 quantityAvailable.invalid">
              <div *ngIf="quantityAvailable.errors.required">Quantity available is required.</div>
              <div *ngIf="quantityAvailable.errors.min">Quantity available should be 0 or higher.</div>
            </div>
          </div>

          <div class="form-group">
              <label for="category">Category</label>
              <select #category="ngModel" [(ngModel)]="product.category" name="category" id ="category" 
                 class="form-control"  required>
                <option value=""></option>
                <option *ngFor="let c of categories$ | async" [value]="c.payload.val().name">
                  {{ c.payload.val().name }}
                </option>
                </select>
              <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
                Category is required.
              </div>
          </div>

          <div class="form-group">
              <label for="description">Description</label>
              <textarea rows="7" #description="ngModel" [(ngModel)]="product.description" 
               name="description" id ="description" class="form-control rounded-0" required></textarea>
                <div class="alert alert-danger" *ngIf="description.touched && description.invalid">
                description is required.
              </div>
          </div>

          <div class="form-group">
           <label for="imageUrl">Image URL</label>
           <input #imageUrl="ngModel" [(ngModel)]="product.imageUrl" name="imageUrl" id ="image" 
               type="text" class="form-control" required url>
              <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
              <div *ngIf="imageUrl.errors.required">ImageUrl is required.</div>
              <div *ngIf="imageUrl.errors.url">Please enter a valid URL</div>
            </div>
          </div>
    </form>
  </div>
  <div class="col-md-6">
      <product-card [product]="product" [showActions]="false"></product-card>
  </div>
</div>

Я хочу создать поле ввода, в котором будут храниться URL-адреса в массиве и динамически обновляться, то есть проверять действительность, хранить в массиве (локально, а не в базе данных) и отображать значение в поле ввода в списке, и это перед отправкой форму, отправив ее в базу данных.

.. поэтому я рассматриваю возможность превращения формы в реактивную форму, чтобы я мог динамически создавать свой массив.

..моя проблема..

у меня есть поле ввода, которое не связано с моей моделью продукта, и мне нужно заполнить его при обновлении формы, мне также нужно, чтобы оно требовалось и реагировало с помощью функции отправки формы (отключить кнопку отправки), наконец, мне нужно хранить его в другом месте, чем продукт через отдельный сервис.

возможно ли это при реактивных формах? любые предложения приветствуются..

у меня около года опыта в программировании, надеюсь, я предоставляю достаточно информации..