Форма выдает ошибку, если я не заполняю все данные в реактивных формах Angular

 ngOnInit() {
    this.contactForm = this.formBuilder.group({
      contactType: ['', Validators.required],
      contactSubType: ['', Validators.required],
      referenceNumber: ['', Validators.required],
      contactStartDate: ['', Validators.required],
      contactLastVerifiedDate: ['']
    });
  }
  onSubmit() {
   if (this.contactForm.valid) {
      const newContact = {
        contactType: this.contactForm.value.contactType,
        contactSubType: this.contactForm.value.contactSubType,
        referenceNumber: this.contactForm.value.referenceNumber,
        startDate: this.parseDate(this.contactForm.value.contactStartDate.toString()),
        lastVerifiedDate: this.parseDate(this.contactForm.value.contactLastVerifiedDate.toString()),
    }

<form [formGroup] = "contactForm" (ngSubmit) = "onSubmit()">
  <div class = "form-group">
    <label>Contact Type</label>
    <mat-select
      formControlName = "contactType"
      class = "form-control"
      [ngClass] = "{ 'is-invalid': submitted && contactFormf.contactType.errors }"
      required
    >
      <mat-option *ngFor = "let obj of contactTypes" [value] = "obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf = "submitted && contactFormf.contactType.errors" class = "invalid-feedback">
      <div *ngIf = "submitted && contactFormf.contactType.errors.required">Contact Type is required</div>
    </div>
  </div>
 
  <div class = "form-group">
    <label>Contact Sub Type</label>
    <mat-select
      formControlName = "contactSubType"
      class = "form-control"
      [ngClass] = "{ 'is-invalid': submitted && contactFormf.contactType.errors }"
      required
    >
      <mat-option *ngFor = "let obj of contactSubTypes" [value] = "obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf = "submitted && contactFormf.contactSubType.errors" class = "invalid-feedback">
      <div *ngIf = "submitted && contactFormf.contactSubType.errors.required">Name Type is required</div>
    </div>
  </div>
  <div class = "form-group">
    <label>Reference Number</label>
    <input
      type = "text"
      formControlName = "referenceNumber"
      class = "form-control"
      [ngClass] = "{ 'is-invalid': submitted && contactFormf.referenceNumber.errors }"
      required
    />
    <div *ngIf = "submitted && contactFormf.referenceNumber.errors" class = "invalid-feedback">
      <div *ngIf = "submitted && contactFormf.referenceNumber.errors.required">Reference Number is required</div>
    </div>
  </div>

  <div class = "form-group">
    <input
      matInput
      [matDatepicker] = "startDate"
      formControlName = "contactStartDate"
      placeholder = "Choose Start date"
      [ngClass] = "{ 'is-invalid': submitted && contactFormf.contactStartDate.errors }"
      required
    />
    <mat-datepicker-toggle matSuffix [for] = "startDate"></mat-datepicker-toggle>
    <mat-datepicker #startDate></mat-datepicker>
    <div *ngIf = "submitted && contactFormf.contactStartDate.errors" class = "invalid-feedback">
      <div *ngIf = "submitted && contactFormf.contactStartDate.errors.required">Contact Start Date is required</div>
    </div>
  </div>

  <div class = "form-group">
    <input matInput [matDatepicker] = "lastVerifiedDate" formControlName = "contactLastVerifiedDate" placeholder = "Choose Last Verified date" />
    <mat-datepicker-toggle matSuffix [for] = "lastVerifiedDate"></mat-datepicker-toggle>
    <mat-datepicker #lastVerifiedDate></mat-datepicker>
  </div>



  <div class = "form-group">
    <button>Save</button>
  </div>
</form>