Angular: ERROR in Template parse errors**: Parser Error: Unexpected token )

Question

Angularアプリを作成中で、
ERROR in Template parse errors**: Parser Error: Unexpected token )
が表示されます。

**ERROR in Template parse errors**:
Parser Error: Unexpected token ) at column 158 in [
            onSubmit(
                firstName.value,
                lastName.value,
                name.value,
                email.value,
            )

下記のコードの中でエラーが発生しております。

<div *ngIf="user$ | async as user; else loginArea">
    <p *ngIf="user.emailVerified">xxxxxx</p>
    <p *ngIf="!user.emailVerified">yyyyy</p>
    <button (click)="logout()">logout</button>
</div>

<ng-template #loginArea>
    <mat-card class="sign-up-card">
        <mat-card-header>
            <mat-card-title class="sign-up-title">zzz</mat-card-title>
        </mat-card-header>

        <mat-card-content>
            <form #form="ngForm" (submit)="
            onSubmit(
                firstName.value,
                lastName.value,
                name.value,
                email.value,
            )
          ">
                <mat-form-field fxFill appearance="outline">
                    <mat-label>first name</mat-label>
                    <input #firstName matInput required ngModel name="firstName" />
                </mat-form-field>
                <mat-form-field fxFill appearance="outline">
                    <mat-label>last name</mat-label>
                    <input #lastName matInput required ngModel name="lastName" />
                </mat-form-field>
                <mat-form-field fxFill appearance="outline">
                    <mat-label>email</mat-label>
                    <input #email matInput required type="email" pattern=".+@.+..+" ngModel name="email" />
                </mat-form-field>
                <mat-form-field fxFill appearance="outline">
                    <mat-label>password</mat-label>
                    <input #password matInput required type="password" ngModel name="password" />
                </mat-form-field>
                <div fxLayout="row">
                    <div>
                        <mat-checkbox fxFill required ngModel name="agree">
                            aaaa
                        </mat-checkbox>
                    </div>
                    <span fxFlex="1 1 auto"></span>
                    <a routerLink="/terms">
                        bbbb
                    </a>
                </div>
                <button mat-raised-button fxFill [color]="'accent'" [disabled]="form.invalid">
                    sign up
                </button>
            </form>
            <button type="button" (click)="resetPassword()" [disabled]="form.get('email').invalid">
                reset password
            </button>
        </mat-card-content>
    </mat-card>
</ng-template>

こちら、なぜエラーが表示されるか質問させていただきたいです。
宜しくお願い致します。