Angular Material表单验证不通过时输入框左侧边框缺失问题求助

安全阿岳

2026-7-15

解决Angular Material表单验证时左侧边框消失的问题

问题核心原因

你的HTML代码存在标签闭合顺序错误：</form>标签写在了</mat-form-field>前面，同时遗漏了<div class="textFields">的闭合标签，导致DOM结构混乱，直接引发样式渲染异常，这是边框缺失的主要诱因。

修复方案

1. 修正HTML结构

调整标签嵌套与闭合顺序，确保DOM结构合法：

<form class="subscriptionForm" #form="ngForm">
  <div class="textFields">
    <mat-form-field appearance="outline">
      <mat-label>Naam</mat-label>
      <input matInput type="text" name="name" />
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Bedrijfsnaam</mat-label>
      <input matInput type="text" name="companyName" required />
    </mat-form-field>
  </div>
</form>

2. 样式兜底修复（若结构修正后仍有问题）

如果调整结构后边框异常依旧，可能是全局样式或自定义样式干扰了Angular Material的默认outline样式，可添加以下CSS强制修正验证状态下的边框：

/* 在subscription-form.component.scss中添加 */
.mat-mdc-form-field-outline.mat-mdc-form-field-outline-error {
  left: 0 !important;
  border-left-width: 1px !important;
}