Как удалить пробелы из mat-input

У меня есть всплывающее окно для создания нового проекта. Я сохраняю запись нового проекта в кусте, который не поддерживает пробелы в имени таблицы. Так может кто-нибудь помочь мне поставить проверку в mat-input, чтобы удалить пробелы из поля inout.

HTML код

<form (ngSubmit) = "(submit)" #formControl = "ngForm">
                    <div class = "form">
                        <mat-form-field color = "accent">
                            <input
                                matInput
                                #input
                                class = "form-control"
                                placeholder = "name"
                                [(ngModel)] = "data.projectName"
                                name = "name"
                                [formControl] = "nameControl"
                                required
                                minlength = "4"
                                (ngModelChange) = "noWhiteSpaceOnChange()"
                            />
                            <mat-error
                                *ngIf = "nameControl.hasError('required')"
                                >Please Enter Name</mat-error
                            >
                            <mat-error
                                *ngIf = "nameControl.hasError('minlength')"
                                >You must enter atleast 4
                                characters</mat-error
                            >
                        </mat-form-field>
                    </div>

                    <!--Textarea for demo purposes-->
                    <div class = "form">
                        <mat-form-field color = "accent">
                            <textarea
                                matInput
                                #input
                                class = "form-control"
                                placeholder = "Description"
                                [(ngModel)] = "data.projectDescription"
                                name = "projectDescription"
                                required
                            ></textarea>
                            <mat-error *ngIf = "formControl.invalid">{{
                                getErrorMessage()
                            }}</mat-error>
                        </mat-form-field>
                    </div>

                    <div mat-dialog-actions>
                        <button
                            mat-button
                            [type] = "submit"
                            [disabled] = "!formControl.valid"
                            [mat-dialog-close] = "data"
                            (click) = "confirmAdd()"
                        >
                            Save
                        </button>
                        <button
                            mat-button
                            (click) = "onNoClick()"
                            tabindex = "-1"
                        >
                            Cancel
                        </button>
                    </div>
                </form>

Машинописный код:

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Component, Inject } from '@angular/core';
import { RecommendationService } from '../../../recommendation- 
service.service';
import { FormControl, Validators } from '@angular/forms';
import { Project } from '../../model/project';

@Component({
selector: 'app-add.dialog',
templateUrl: './add.dialog.html',
styleUrls: ['./add.dialog.scss']
})

export class AddDialogComponent {
formControl = new FormControl('', [
Validators.required
// Validators.email,
]);

constructor(public dialogRef: MatDialogRef<AddDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Project,
public dataService: RecommendationService) { }


getErrorMessage() {
return this.formControl.hasError('required') ? 'Required field' :
  this.formControl.hasError('email') ? 'Not a valid email' :
    '';
}

submit() {
// emppty stuff
}

onNoClick() {
this.dialogRef.close();
}

public confirmAdd() {
this.addProject(this.data);
}
// DEMO ONLY, you can find working methods below
addProject(project: Project) {
return project;
}
}
class SaveData {
id: number;
title: String;
CreatedOn: String;
}

Обновлено: в соответствии с предложениями я использовал реактивную форму, но я все еще не могу понять