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

<form class="m-2" novalidate [formGroup]="formGroup" (ngSubmit)="submitForm()">
  <div class="bg-danger text-white p-2 mb-2"
      *ngIf="formSubmitted && formGroup.invalid">
      Wystąpiły pewne problemy z formularzem.
      <ul>
          <li *ngFor="let error of formGroup.getFormValidationMessages()">
              {{error}}
          </li>
      </ul>
  </div>

  <div class="form-group" *ngFor="let control of formGroup.productControls">
      <label>{{control.label}}</label>
      <input class="form-control"
          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 && formGroup.invalid"
      [class.btn-secondary]="formSubmitted && formGroup.invalid">
          Dodaj
  </button>
</form>
