Angular中表单嵌套section标签后输入框失效问题求助

我正在使用Angular搭建作品集网站，使用section标签划分不同板块。其中联系板块的代码如下：

<section>
  <form class="mat-elevation-z4 p-5" (click)="sendMessage()">
    <input type="text" placeholder="Name" class="name"/>
    <input type="text" placeholder="Email" class="email"/>
    <input type="text" placeholder="Write your message here" class="message"/>
    <button>Click</button>
  </form>
</section>

遇到的问题：当表单被section标签包裹时，输入框表现为只读状态；移除section标签后则可正常使用。需要实现表单正常嵌套在section标签中。

可能的原因及解决办法 #

1. 表单的(click)事件干扰输入框焦点

你将sendMessage()绑定在了整个<form>标签的click事件上，点击输入框时事件会冒泡到表单触发该方法，这会干扰输入框获取焦点的逻辑，导致无法编辑。

解决办法：将点击事件移到提交按钮上，这是更符合交互逻辑的做法：

<section>
  <form class="mat-elevation-z4 p-5">
    <input type="text" placeholder="Name" class="name"/>
    <input type="text" placeholder="Email" class="email"/>
    <input type="text" placeholder="Write your message here" class="message"/>
    <button (click)="sendMessage()">发送消息</button>
  </form>
</section>

2. Section标签的CSS样式阻止交互

检查全局样式或section的自定义样式，看是否存在以下干扰交互的属性：

• pointer-events: none：会让section及其子元素无法响应鼠标事件
• user-select: none：虽不直接影响输入，但可能伴随其他阻止交互的样式
• 过低的opacity或filter属性，导致视觉上的“只读”错觉
• 父元素z-index层级问题，导致输入框被其他元素遮挡

解决办法：移除或修改这些异常样式，确保section及其子元素的交互属性正常：

section {
  /* 移除或注释掉以下属性 */
  /* pointer-events: none; */
  /* user-select: none; */
}

3. Angular指令或第三方库的冲突

如果项目中使用了自定义指令、Angular Material等第三方表单库，可能存在指令作用在section上，意外影响了内部表单的交互状态。

解决办法：暂时移除section上绑定的自定义指令测试；检查Angular Material表单组件的配置，确保输入框没有被误设为禁用状态。

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