Angular: Template parse errors: Parser Error: Unexpected token = at column

Question

I am writing an Angular app, built with Angular CLI. The new template parser reports the following unexpected token errors.

Angular throws error like

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

when processing the

<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>

I'm not aware that there has been any change in syntax, so I'm assuming that this is an error in the TemplateGenerator.

Answer 1

Remove comma at the last parameter of form Onsubmit.

onSubmit(firstName.value,
         lastName.value,
         name.value,
         email.value)