Angular form submit button not working in Safari - Stack Overflow

admin管理员组

文章数量:1389749

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-linkponent.html',
  styleUrl: './post-linkponent.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.

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-linkponent.html',
  styleUrl: './post-linkponent.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.

• angular

Share Improve this question Follow asked Mar 16 at 17:31 nealneal 56722 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

• Safari has strict restrictions with button submissions I think.
• so I added a event to the submit button and basically am effectively preventing the default behavior on click

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

submitPost(event: Event) {
      event.preventDefault();
      const formValues = this.linkFormGroup.value;
      alert(`Form submitted with values:\nURL: ${formValues.url}\nComment: ${formValuesment}`);
      console.log(formValues);
    }

本文标签： Angular form submit button not working in SafariStack Overflow