add-dialog1.component.html

<app-sidebar></app-sidebar>
<mat-card>
  <div class="zawartosc">
    <h1>Dodaj pojazd <button mat-raised-button class="exit" color="warn" routerLink="/pojazdy"><img class="icons" alt=""  src="../assets/icons8-delete-32.png">
    </button></h1>
    <hr>
    <p>Poniżej podaj dane do wypełnienia</p>
    <hr>
      <form [formGroup]="carsaveform" #savecar (ngSubmit)="saveCar(saveCar)">
        <div class="row">
          <div class="form-group">
            <label>Marka</label>
            <input type="text" class="form-control"  formControlName="mark" data-toggle="tooltip"
                   data-placement="right" title="Podaj markę">
            <div class="alert alert-danger" *ngIf = "(Mark.touched) && (Mark.invalid)"
                 style="margin-top: 5px;">
              <span *ngIf="Mark.errors.required">Marka jest wymagana</span>
            </div>
          </div>
          <div class="form-group">
            <label>Model</label>
            <input type="text" class="form-control"  formControlName="model" data-toggle="tooltip"
                   data-placement="right" title="Podaj model">
            <div class="alert alert-danger" *ngIf = "(Model.touched) && (Model.invalid)"
                 style="margin-top: 5px;">
              <span *ngIf="Model.errors.required">Model jest wymagany</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label>Numer Rejestracyjny</label>
            <input type="text" class="form-control"  formControlName="registrationNumber" data-toggle="tooltip"
                   data-placement="right" title="Podaj numer rejestracyjny">
            <div class="alert alert-danger" *ngIf = "(RegistrationNumber.touched) && (RegistrationNumber.invalid)"
                 style="margin-top: 5px;">
              <span *ngIf="RegistrationNumber.errors.required">Numer rejestracyjny jest wymagany</span>
              <span *ngIf = "RegistrationNumber.errors.minlength">Za krótki numer</span>
              <span *ngIf = "RegistrationNumber.errors.maxlength">Za długi numer</span>
            </div>
          </div>
          <div class="form-group">
            <label>Osie</label>
            <input type="number" class="form-control" formControlName="axes"
                   data-toggle="tooltip" data-placement="right" title="Podaj liczbę osi">
            <div class="alert alert-danger" *ngIf = "(Axes.touched) && (Axes.invalid)"
                 style="margin-top: 5px;">
              <span *ngIf="Axes.errors.required">Osie są wymagane</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label>Data produkcji</label>
            <input type="date" class="form-control"  formControlName="yearProduction" data-toggle="tooltip"
                   data-placement="right" title="Podaj telefon komórkowy" >
            <div class="alert alert-danger" *ngIf = "(YearProduction.touched) && (YearProduction.invalid)"
                 style="margin-top: 5px;">
              <span *ngIf="YearProduction.errors.required">Data produkcji jest wymagany</span>
            </div>
          </div>
          <div class="form-group">
            <label>Data nabycia pojazdu</label>
            <input type="date" class="form-control"  formControlName="datePurchase" data-toggle="tooltip"
                   data-placement="right" title="Podaj datę nabycia pojazdu" >
            <div class="alert alert-danger" *ngIf = "(DatePurchase.touched) && (DatePurchase.invalid)"
                 style="margin-top: 5px;">
              <span *ngIf="DatePurchase.errors.required">Data nabycia pojazdu jest wymagana</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label>Data przeglądu</label>
            <input type="date" class="form-control"  formControlName="dateReview" data-toggle="tooltip"
                   data-placement="right" title="Podaj datę przeglądu" >
            <div class="alert alert-danger" *ngIf = "(DateReview.touched) && (DateReview.invalid)"
                 style="margin-top: 5px;">
              <span *ngIf="DateReview.errors.required">Data przeglądu jest wymagana</span>
            </div>
          </div>
          <div class="form-group">
            <label>Typ pojazdu</label>
            <div *ngIf="typeList">
              <select class="form-control" formControlName="carType" data-toggle="tooltip"
                      data-placement="right" title="Wybierz typ pojazdu" >
                <option selected value="0">--Wybierz typ--</option>
                <option *ngFor="let carType of typeList"  value="carType.name">{{carType.name}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="row">

        <div class="form-group">
          <label >Status</label>
          <div *ngIf="statusList">
          <select class="form-control" formControlName="carStatus" data-toggle="tooltip"
                  data-placement="right" title="Wybierz status" >
            <option selected value="0">--Wybierz stanowisko--</option>
            <option *ngFor="let carStatus of statusList"  value="carStatus.name">{{carStatus.name}}</option>
          </select>
          </div>
        </div>
        </div>
        <hr>
        <button type="submit" class="btn btn-success" (click)="openSnackBar('Pojazd dodany pomyślnie!', 'Zamknij')">Dodaj</button>
      </form>
</div>
</mat-card>