form.component.html

<div class="card mb-4">
    <div class="card-header"><i class="fa fa-plus text-success" aria-hidden="true"></i> New product</div>
    <div class="card-body">
        <div class="mb-3 row">
            <label for="productDataList" class="col-sm-3 text-end col-form-label">Product</label>
            <div class="col-sm-8">
                <input class="form-control" [ngClass]="{'is-invalid': productNameError}" (keyup)="onChangeProduct($event)" [(ngModel)]="currentProduct.name" list="productOptions" id="productDataList" placeholder="Type to search..." required>
                <datalist id="productOptions">
                    <option *ngFor="let opt of productNames" value="{{opt}}"></option>
                </datalist>
                <div class="invalid-feedback">Please enter a product name.</div>
            </div>
        </div>
        <div class="mb-3 row">
            <label for="inputPrice" class="col-sm-3 text-end col-form-label">Price</label>
            <div class="col-sm-8">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-price"><i class="fa fa-dollar" aria-hidden="true"></i></span>
                    <input type="text"  [ngClass]="{'is-invalid': productPriceError}" [(ngModel)]="currentProduct.price" class="form-control" id="inputPrice" placeholder="Price" aria-label="Price" aria-describedby="basic-price">
                    <div class="invalid-feedback">Please add a price.</div>
                </div>
            </div>
        </div>
        <div class="mb-3 row">
            <div class="col-sm-8 offset-sm-3 text-end">
                <button type="button" class="btn btn-success btn-sm" (click)="addProduct()"> 
                    <i class="fa fa-paper-plane me-1" aria-hidden="true"></i>
                    Save
                </button>
            </div>
        </div>
    </div>
</div>