Form group dropdown menu content not present in json, Angular 6 - html

Question

I have made a form group where the purpose is to register cars.
On submit it is generating a JSON from the values inserted.
The issue is that the value from the dropdown menu is not present in the JSON.
The dropdown menu is populated with the choices shown below and is the first entry in the form group.
The label names and error messages are in Norwegian but the essence should be there.
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 offset-md-4">
<h3>Fyll inn</h3>
<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<div class="form-group">
<label for="CarType">Bil type</label>
<select id="CarType" name="CarType" [(ngModel)]="CarType" class="form-control">
<option [ngValue]="CarType" *ngFor="let CarType of CarTypes" [value]="CarType.Id">{{CarType.Name}}</option>
</select>
</div>
<div class="form-group">
<label for="LicensePlate">Skiltnummer</label>
<input type="text" class="form-control" name="LicensePlate" [(ngModel)]="model.LicensePlate" #LicensePlate="ngModel" [ngClass]="{ 'is-invalid': f.submitted && LicensePlate.invalid }" required />
<div *ngIf="f.submitted && LicensePlate.invalid" class="invalid-feedback">
<div *ngIf="LicensePlate.errors.required">Skiltnummer er påkrevd</div>
</div>
</div>
<div class="form-group">
<label for="KilometersDriven">Kilometerstand</label>
<input type="number" class="form-control" name="KilometersDriven" [(ngModel)]="model.KilometersDriven" #KilometersDriven="ngModel" [ngClass]="{ 'is-invalid': f.submitted && KilometersDriven.invalid }" required />
<div *ngIf="f.submitted && KilometersDriven.invalid" class="invalid-feedback">
<div *ngIf="KilometersDriven.errors.required">Kilometerstand er påkrevd</div>
</div>
</div>
<div class="form-group">
<label for="Seats">Antall seter</label>
<input type="number" class="form-control" name="Seats" [(ngModel)]="model.Seats" #Seats="ngModel" [ngClass]="{ 'is-invalid': f.submitted && Seats.invalid }" required />
<div *ngIf="f.submitted && Seats.invalid" class="invalid-feedback">
<div *ngIf="Seats.errors.required">Antall seter er påkrevd</div>
</div>
</div>
<div class="form-group">
<label for="Gears">Antall gir</label>
<input type="number" class="form-control" name="Gears" [(ngModel)]="model.Gears" #Gears="ngModel" [ngClass]="{ 'is-invalid': f.submitted && Gears.invalid }" required />
<div *ngIf="f.submitted && Gears.invalid" class="invalid-feedback">
<div *ngIf="Gears.errors.required">Antall gir er påkrevd</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">Registrer</button>
</div>
</form>
</div>
</div>
</div>
</div>
import { Component, OnInit } from '#angular/core';
import { CarType } from 'src/shared/models/cartype.model';
#Component({
selector: 'app-add-car',
templateUrl: './add-car.component.html',
styleUrls: ['./add-car.component.css']
})
export class AddCarComponent implements OnInit {
CarTypes: CarType[] = [
{ Id: 1, Name: 'SUV' },
{ Id: 2, Name: 'Coupe' },
{ Id: 3, Name: 'Sedan' }
]
model: any = {};
onSubmit() {
console.log(this.model)
alert('SUCCESS \n\n' + JSON.stringify(this.model))
}
constructor() { }
ngOnInit() {
}
}
export class CarType {
Id: number;
Name: String;
}
To the right is a link to the fill in form on the website.
To the right is a image of the JSON reply created from the previous picture
{LicensePlate: "RH123123", KilometersDriven: 120000, Seats: 5, Gears: 6}

Answer 1

You didn't bind it with the model object [(ngModel)]="CarType"
<select id="CarType" name="CarType" [(ngModel)]="model.carType" class="form-control">
<option [ngValue]="CarType" *ngFor="let CarType of CarTypes" [value]="CarType.Id">{{CarType.Name}}</option>
</select>