<style>
    input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
    input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
</style>

<form novalidate [formGroup]="form" (ngSubmit)="submitForm(form)">

    <div class="bg-danger p-a-1 m-b-1" *ngIf="formSubmitted && form.invalid">
        Wystąpiły pewne problemy z formularzem.
        <ul>
            <li *ngFor="let error of form.getFormValidationMessages()">
                {{error}}
            </li>
        </ul>
    </div>

    <div class="form-group" *ngFor="let control of form.productControls">
        <label>{{control.label}}</label>
        <input class="form-control"
            [(ngModel)]="newProduct[control.modelProperty]"
            name="{{control.modelProperty}}"
            formControlName="{{control.modelProperty}}" />
        <ul class="text-danger list-unstyled"
                *ngIf="(formSubmitted || control.dirty) && control.invalid">
            <li *ngFor="let error of control.getValidationMessages()">
                {{error}}
            </li>
        </ul>
    </div>

    <button class="btn btn-primary" type="submit"
        [disabled]="formSubmitted && form.invalid"
        [class.btn-secondary]="formSubmitted && form.invalid">
            Dodaj
    </button>
</form>
