Angular form submit button not working in Safari

I am sure I am missing something simple here. I have a very simple component with one form with a submit button. I am unable to get the onsubmit handler to work correctly in Safari, but it works fine in Chrome.

Component HTML

<div>
<form [formGroup]="linkFormGroup" (ngSubmit)="submitPost()">
<label for="url">URL</label>
<input type=text size="80" id="url" formControlName="url">
<label for="comment">Post</label>
<textarea id="comment" formControlName="comment"></textarea>
<button type="submit">Submit</button>
</form>
</div>


Component Typescript code:

import { Component } from '@angular/core';
import { FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { AsyncPipe } from '@angular/common';
import { Observable } from 'rxjs';

@Component({
imports: [FormsModule, AsyncPipe, ReactiveFormsModule],
selector: 'post-link',
templateUrl: './post-link.component.html',
styleUrl: './post-link.component.css'
})
export class PostLinkComponent {
post_content: string="";
linkMetadata$! : Observable<LinkMetadata>;
linkFormGroup = new FormGroup({
url: new FormControl(''),
comment: new FormControl(''),
})

submitPost() {
console.log(this.linkFormGroup.value);
}
}


When I click Submit in Safari, nothing happens. When I click in Chrome, I see the appropriate logging in the console. Any thoughts? Thanks.

Continue reading...