Angular中NgClass应用导致表单显示及样式异常问题求助

1. 修正NgClass指令的表达式 #

移除[ngClass]中重复的example-container声明（div本身已通过class属性设置该类），同时简化布尔判断：

<mat-dialog-content class="mat-typography">
    <div *ngFor="let form of addEmpForm; let i = index" class="example-container" [ngClass]="{
        'formValidationError': validationFormErrors[i]
    }">

2. 验证数组长度匹配 #

确保validationFormErrors数组的长度与addEmpForm完全一致，避免循环时出现数组索引越界，导致validationFormErrors[i]返回undefined，影响NgClass的解析逻辑。

3. 提升错误样式的优先级 #

修改SCSS中.formValidationError的选择器，确保其样式能正确覆盖容器原有样式：

.example-container.formValidationError {
    border: 2px solid red;
    padding: 10px;
    border-radius: 20px;
    background-color: lightcoral;
}

原理说明 #

• 重复声明example-container类可能导致Angular在DOM更新时出现渲染异常，移除后可恢复正常布局；
• 简化布尔判断validationFormErrors[i]等价于validationFormErrors[i] == true，代码更简洁且避免潜在的类型判断问题；
• 提升样式优先级后，错误状态的样式能确保生效，不会被容器原有样式覆盖。

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