formularz-podstawy

<div class="container">
  <div class="card-container" *ngIf="!selectedCar; else carInfo"> <!--5-->
    <app-card *ngFor="let car of cars" class="card"
              [identifier]="car.vin"
              [title]="car.brand"
              [subtitle]="car.model"
              [photoSource]="car.photoSource"
              [description]="'CENA: ' + car.price + ' ZŁ. VIN: ' + car.vin"
              (carSelected)="carSelected($event)"> <!--6 i 7-->
    </app-card>
  </div>
  <ng-template #carInfo>
    <div class="card-container">
      <app-card class="info-card-form"
                [identifier]="selectedCar.vin"
                [title]="selectedCar.brand"
                [subtitle]="selectedCar.model"
                [photoSource]="selectedCar.photoSource"
                [description]="'CENA: ' + selectedCar.price + ' ZŁ. VIN: ' + selectedCar.vin"
                [isCarSelected]="!!selectedCar"
                (returnToMainWindow)="resetCarSection()"> <!--6 i 7-->
      </app-card>

      <mat-card class="form-card">
        <mat-card-header>
          <mat-card-title>Wprowadź dane klienta</mat-card-title>
        </mat-card-header>
        <mat-card-content>

        </mat-card-content>
      </mat-card>
    </div>
  </ng-template>
</div>

Zbudowany formularz jest typu FormGroup i posiada wewnątrz siebie element np. name który jest typu FormControl. Jak widzisz poszczególny formControl może posiadać walidacje w tym przypadku required. 

Przejdź do app.component.ts i dodaj następujący kod.

import {Component, OnInit} from '@angular/core';
import {CarService} from './car/car.service';
import {CarModel} from './car/car.model';
import {FormService} from './form/form.service';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  selectedCar: CarModel;
  cars: CarModel[] = [];
  clientForm: FormGroup; // 1

  public ngOnInit(): void {
    this.carService.fetchAvailableCars().subscribe(cars => {
      this.cars = cars;
    });

    this.clientForm = this.formService.createClientFormGroup();
  }

  constructor(private carService: CarService, private formService: FormService) {
  }

  public carSelected(vin: string): void {
    this.selectedCar = this.cars
      .find(car => car.vin === vin);
  }

  public resetCarSection() {
    this.selectedCar = null;
  }

  public countDiscount() { // 2
    console.log(this.clientForm.controls);
  }
}