Form validation - Checkbox, dropdown, text field

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'course-form',
  templateUrl: './course-form.component.html',
  styleUrls: ['./course-form.component.scss']
})
export class CourseFormComponent {
  categories = [
    { id: 1, name: 'Development'},
    { id: 2, name: 'Art'},
    { id: 3, name: 'Languages'}
  ];

  log(x) { console.log(x); }

  submit(f){
    console.log(f);
    console.log(f.value.contact.courseName);
    console.log(f.value.categoryName.name);
  }

}