Angular 14中表单验证器生效但错误消息不显示问题排查

核心错误点 #

• 提交状态标记赋值错误：addOrganization方法里将submittedAddOrganization设为false，但错误提示的显示条件依赖该变量为true，导致验证失效后无法触发错误消息。
• 组件装饰器使用错误：当前组件用了@Injectable()，Angular组件必须使用@Component装饰器才能正确渲染。
• 模态框自实例化逻辑问题：openAddOrganizationModal方法直接实例化当前组件作为模态框内容，会生成新的组件实例，原实例的表单状态无法关联到模态框内的表单。

分步修复方案 #

1. 修正提交状态赋值 #

修改addOrganization方法，将提交标记设为true，触发错误提示的显示条件：

public addOrganization() {
    this.submittedAddOrganization = true; // 改为true
    if(this.addOrganizationFormGroup.invalid) {
        console.log('Yes is invalid ');
    } else {
        console.log('Adding Organization function!');
    }
}

2. 修正组件装饰器 #

替换@Injectable()为@Component，补充组件必要元数据：

import { Component, OnInit, Injector } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-add-organization',
  templateUrl: './add-organization.component.html', // 对应你的HTML文件路径
  standalone: false, // 根据项目配置调整，Angular14支持独立组件
})
export class AddOrganizationComponent implements OnInit {
    // 原有的类属性和方法保留
}

3. 调整模态框调用逻辑（优化建议） #

将模态框触发逻辑移到父组件，避免组件自实例化导致的状态隔离问题：
父组件代码示例：

import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { AddOrganizationComponent } from './add-organization.component';

@Component({
  selector: 'app-parent',
  template: `<button class="btn btn-primary" (click)="openAddOrgModal()">添加组织</button>`
})
export class ParentComponent {
  constructor(private modalService: BsModalService) {}

  openAddOrgModal() {
    this.modalService.show(AddOrganizationComponent, {
      class: "modal-dialog-centered modal-sm"
    });
  }
}

验证修复效果 #

修改完成后，点击提交按钮：

• 文本框为空时，submittedAddOrganization变为true，表单验证失效，错误消息正常显示
• 文本框有内容时，表单验证通过，执行后续业务逻辑

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