<div class="bg-primary p-a-1" [class.bg-warning]="editing">
    <h5>{{editing  ? "Edycja" : "Dodawanie"}} produktu</h5>
</div>

<form novalidate #form="ngForm" (ngSubmit)="submitForm(form)" (reset)="resetForm()" >

    <div class="form-group">
        <label>Produkt</label>
        <input class="form-control" name="name"
               [(ngModel)]="product.name" required />
    </div>

    <div class="form-group">
        <label>Kategoria</label>
        <input class="form-control" name="category"
               [(ngModel)]="product.category" required />
    </div>

    <div class="form-group">
        <label>Cena</label>
        <input class="form-control" name="price"
               [(ngModel)]="product.price"
               required pattern="^[0-9\.]+$" />
    </div>

    <button type="submit" class="btn btn-primary"
            [class.btn-warning]="editing" [disabled]="form.invalid">
        {{editing ? "Zapisz" : "Dodaj"}}
    </button>
    <button type="reset" class="btn btn-secondary">Anuluj</button>
</form>
