Angular表单提交按钮在Safari中无法正常工作的问题排查

你的问题大概率是未定义的LinkMetadata类型导致Safari中组件初始化失败，进而让ngSubmit绑定失效。Chrome对这类类型检查的容错性更高，所以能正常运行，但Safari的JS引擎在严格模式下会因为未定义的类型抛出错误，阻断后续逻辑。

具体问题点 #

你的代码里声明了linkMetadata$! : Observable<LinkMetadata>;，但既没有导入LinkMetadata类型，也没有在组件内定义这个类型。在Angular的严格模式下，这种情况会触发类型错误，Safari对这类错误的处理更严格，直接导致组件无法正常初始化，提交按钮的绑定自然失效。

修复步骤 #

1. 定义或移除未使用的类型变量
   如果LinkMetadata是你需要的类型，先定义它：

   interface LinkMetadata {
     // 按需定义字段，比如 url: string; title: string;
   }
   

   如果暂时用不到这个变量，直接注释或删除：

   // linkMetadata$! : Observable<LinkMetadata>;
   

2. 额外验证：手动阻止表单默认行为（可选）
   虽然不是主要原因，但可以在提交函数里手动阻止默认提交行为，避免浏览器刷新页面的干扰：

   • 修改HTML中的ngSubmit绑定：

     <form [formGroup]="linkFormGroup" (ngSubmit)="submitPost($event)">
     

   • 在TS函数中添加阻止逻辑：

     submitPost(event: Event) {
       event.preventDefault();
       console.log(this.linkFormGroup.value);
     }
     

3. 检查Safari控制台错误
   打开Safari的开发者工具（偏好设置-高级-勾选"显示开发菜单"），查看控制台的错误信息，确认是否有其他报错影响组件运行。

验证修复 #

修改后重新编译运行，Safari中点击提交按钮应该能正常打印表单值了。

内容的提问来源于stack exchange，提问作者neal