There is no interaction when clicking the button - html

Question

error
<form [formGroup]="signUpForm">
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="firstName" type="text" placeholder="Ad">
</div>
</div>
<small
*ngIf="signUpForm.controls['fistName'].dirty && signUpForm.hasError('required', 'firstName')"
class="text-danger">*Ad gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="lastName" type="text" placeholder="Soyad">
</div>
</div>
<small
*ngIf="signUpForm.controls['lastName'].dirty && signUpForm.hasError('required', 'lastName')"
class="text-danger">*Soyad gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-envelope p-2"></span>
<input formControlName="email" type="text" placeholder="E-mail">
</div>
</div>
<small
*ngIf="signUpForm.controls['email'].dirty && signUpForm.hasError('required', 'email')"
class="text-danger">*E-mail gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="userName" type="text" placeholder="Kullanıcı Adı">
</div>
</div>
<small
*ngIf="signUpForm.controls['userName'].dirty && signUpForm.hasError('required', 'userName')"
class="text-danger">*Kullanıcı Adı gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-lock p-2"></span>
<input formControlName="password" [type]="type" placeholder="Şifre">
<span (click)="hideShowPass()" class="fa {{eyeIcon}}"></span>
</div>
</div>
<small
*ngIf="signUpForm.controls['password'].dirty && signUpForm.hasError('required', 'password')"
class="text-danger">*Şifre gerekli!</small>
<button type="submit" style="background-color: black; color:white;"
class="btn btn-black btn-block mt-4 w-100" (click)="onSignUp()">Kayıt Ol</button>
<div class=" text-center pt-4 text-muted">Zaten bir hesabın var mı? <a id="forget"
routerLink="/login">Oturum Aç</a>
</div>
</form>
`
This is my angular signup form but when I click the submit "(kayıt ol)" button, there is no interaction and a frame appears around the password section. How can I fix this? (When you click the Submit button, it should give a warning because there are spaces.)