Angular Material mat-stepper not working with 4 child items - html

Question

I'm trying to create a mat-stepper on a new, empty page in Angular
it does work generally, but disappears when I add the 4th mat-from-field (in step 2)
the whole mat-stepper won't show up anymore after refreshing the page
input fields are all bound to a variable through "[(ngModel)]"
every mat-step has it's own "[stepControl]"
every form has it's own "[formGroup]"
HTML:
<mat-stepper linear labelPosition="bottom" #stepper>
<mat-step [stepControl]="firstFormGroup" [editable]="true">
<form [formGroup]="firstFormGroup" class="groupFields">
<ng-template matStepLabel>Fill out Project Info</ng-template>
<mat-form-field appearance="fill">
<mat-label>Project Name</mat-label>
<input matInput formControlName="firstCtrl" [(ngModel)]="projectName" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Requirements</mat-label>
<textarea [(ngModel)]="requirements"
matInput
cdkTextareaAutosize
#autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="5"
cdkAutosizeMaxRows="15"></textarea>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Employee Email</mat-label>
<input matInput [(ngModel)]="email" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" [editable]="true">
<form [formGroup]="secondFormGroup">
<div class="customerFrom">
<div class="groupFields">
<ng-template matStepLabel>Fill out Customer Info</ng-template>
<mat-form-field appearance="fill">
<mat-label>Customer Name</mat-label>
<input matInput formControlName="secondCtrl" [(ngModel)]="company" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Address</mat-label>
<input [(ngModel)]="customerAddress" matInput>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>City</mat-label>
<input [(ngModel)]="customerCity" matInput>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Customer Type</mat-label>
<input [(ngModel)]="customerType" matInput>
</mat-form-field>
</div>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="thirdFormGroup" [editable]="true">
<form [formGroup]="thirdFormGroup">
<div class="customerFrom">
<div class="groupFields">
<ng-template matStepLabel>Add Contacts</ng-template>
<mat-form-field appearance="fill">
<mat-label>Contact Stuff</mat-label>
<input formControlName="thirdCtrl" matInput>
</mat-form-field>
</div>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Create Project</ng-template>
Create the Project or go back and edit!
<div>
<button mat-button matStepperPrevious>
<mat-icon>edit</mat-icon> back
</button>
<button mat-button (click)="createProject()">
<mat-icon>done</mat-icon> create Project
</button>
</div>
</mat-step>
</mat-stepper>
TS:
export class ProjectCreationComponent implements OnInit {
projectName: string = '';
selectedStatus: string = '';
requirements: string = '';
company: string = '';
customerAddress: string = '';
customerCity: string = '';
customerType: string = '';
forename: string = '';
surname: string = '';
address: string = '';
city: string = '';
email: string = '';
mobile: string = '';
contacts: Contact[] = [];
unsubscribe$: Subject<void> = new Subject<void>();
firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required],
});
secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required],
});
thirdFormGroup = this._formBuilder.group({
thirdCtrl: ['', Validators.required],
});
constructor(
private service: ProjectService,
private router: Router,
private _formBuilder: FormBuilder) { }
ngOnInit(): void {
}
addContact() {
let contact = {} as Contact;
contact.forename = this.forename;
contact.surname = this.surname;
contact.address = this.address;
contact.city = this.city;
contact.email = this.email;
contact.mobile = this.mobile;
this.contacts.push(contact);
}
deleteContact(contact: Contact) {
const index: number = this.contacts.indexOf(contact);
if(index !== -1) {
this.contacts.splice(index, 1);
}
}
createProject() {
const customer: Customer = {
name: this.company,
contacts: this.contacts,
address: this.customerAddress,
city: this.customerCity,
customerTyp: this.customerType
}
const announcement: Announcement = {
requirements: this.requirements,
customers: [customer],
offers: [],
}
const project: ProjectCreationRequest = {
name: this.projectName,
employeeEmail: this.email,
announcements: [announcement],
offers: []
};
this.service.createProject(project)
.pipe(takeUntil(this.unsubscribe$))
.subscribe();
this.router.navigateByUrl('/');
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
I've also exactly tried removing a mat-form-field (so that I only have 3 in the form), for every single one of them, so there is not a specific one that's causing the problem.
One more thing I've tried is changing "[(ngModel)]" to "[value]", because 2 way binding isn't necessarily needed, but with that the value of the textfield can't be stored in the variable.
Also I didn't find anything in the material documentation about a maximum size of step child items or anything.
Stackblitz (not 1:1 because of too many classes): https://stackblitz.com/edit/angular-buspzu?file=src/app/app.component.ts