Angular动态表单：为校验错误的输入框添加红色边框

这是个很常见的动态表单场景，我来帮你一步步实现需求，同时修正原始代码里的一些语法问题~

核心思路 #

我们要通过数据驱动的方式来控制输入框的错误样式，而不是直接操作DOM：

1. 给每个动态生成的表单项添加一个hasError状态属性，标记是否校验失败
2. 在模板里用[ngClass]根据这个状态动态添加错误样式类
3. 提交校验时更新对应项的hasError状态

步骤1：修正模板并添加样式绑定 #

首先修复原始模板里的标签闭合问题，然后给输入框/文本框加上动态样式绑定：

<div *ngFor="let content of contents; let i = index">
  <h6 *ngIf="content.Label">{{ content.Label | translate }}</h6>
  <ng-container [ngSwitch]="content.Type">
    <!-- 文本输入框 -->
    <input 
      *ngSwitchCase="INPUT_TYPE.TextBox" 
      #input 
      [value]="content?.Value" 
      type="text"
      [ngClass]="{'input-error': content.hasError}"
    >
    <!-- 多行文本框 -->
    <textarea 
      *ngSwitchCase="INPUT_TYPE.TextBoxMultiLine" 
      #input 
      [value]="content?.Value"
      [ngClass]="{'input-error': content.hasError}"
    ></textarea>
  </ng-container>
</div>
<button type="button"(click)="accept()">Submit</button>

步骤2：定义错误样式 #

在组件的CSS里添加错误状态的样式：

.input-error {
  border: 2px solid #f44336; /* 红色边框 */
  background-color: #ffebee; /* 可选：浅红色背景增强提示 */
}

步骤3：完善组件逻辑 #

首先确保从后端获取contents数据时，给每个项初始化hasError状态；然后修改accept()方法，在校验时更新这个状态：

import { Component, ViewChildren, QueryList, ElementRef, OnInit } from '@angular/core';

// 假设你的INPUT_TYPE枚举定义如下
enum INPUT_TYPE {
  TextBox = 'TextBox',
  TextBoxMultiLine = 'TextBoxMultiLine'
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  INPUT_TYPE = INPUT_TYPE;
  contents: any[] = [];

  @ViewChildren('input') data!: QueryList<ElementRef>;

  ngOnInit(): void {
    // 模拟从后端获取数据，初始化每个项的hasError为false
    this.loadFormContents();
  }

  accept(): void {
    const inputElements = this.data.toArray();
    
    // 先重置所有错误状态，避免上次校验的残留
    this.contents.forEach(item => item.hasError = false);

    // 遍历每个输入框执行校验
    for (let i = 0; i < inputElements.length; i++) {
      const inputValue = inputElements[i].nativeElement.value.trim();
      const currentContent = this.contents[i];

      // 这里写你的具体校验规则，比如必填校验
      if (!inputValue) {
        currentContent.hasError = true;
      }
      // 可以添加更多校验规则，比如长度限制、格式校验等
      // else if (inputValue.length < 3) {
      //   currentContent.hasError = true;
      // }
    }

    // 可选：判断是否有错误，再决定是否提交
    const hasErrors = this.contents.some(item => item.hasError);
    if (!hasErrors) {
      // 校验通过，执行提交逻辑
      console.log('表单校验通过，准备提交数据');
      // this.submitForm();
    }
  }

  // 模拟从后端加载表单配置
  private loadFormContents(): void {
    // 实际项目中替换为HTTP请求
    this.contents = [
      { Label: '用户名', Type: INPUT_TYPE.TextBox, Value: '', hasError: false },
      { Label: '个人简介', Type: INPUT_TYPE.TextBoxMultiLine, Value: '', hasError: false }
    ];
  }
}

关键说明 #

• 为什么不用直接操作DOM加样式？Angular推荐数据驱动视图，通过content.hasError状态来控制样式，比直接修改DOM元素更符合框架设计理念，也更容易维护和扩展。
• 每次校验前重置hasError状态，是为了避免用户修正错误后，之前的错误样式还残留。
• 如果需要更复杂的校验（比如异步校验、自定义校验器），可以考虑结合Angular的FormGroup和FormControl来实现动态表单，不过对于简单场景，上面的方案已经足够轻便。

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