Clarity Design Angular登录表单调用markAsTouched未触发校验样式问题

• Clarity 封装的表单容器组件（clr-input-container、clr-password-container等）的错误样式默认触发逻辑为：控件校验不通过（invalid）的前提下，同时满足「控件被标记为已触碰（touched）且已修改（dirty）」或「表单已触发提交事件」两个条件之一。你仅调用markAllAsTouched()或者单独设置touched状态，没有同步修改控件的dirty状态，也没有让Clarity组件感知到表单提交动作，因此无法触发错误样式。
• 你当前使用纯响应式表单，未在form标签上引入Clarity官方的ClrForm指令，Clarity的表单控件无法感知表单的全局提交状态，也就不会在提交后自动触发错误样式展示。

方案1：手动修改控件状态（快速适配现有代码） #

在标记控件为touched的同时，同步标记为dirty，并触发变更检测保证视图更新。
首先在组件中注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

然后修改提交逻辑：

login(): void {
    if (this.form.invalid) {
        Object.keys(this.form.controls).forEach(controlName => {
            const control = this.form.get(controlName);
            control?.markAsTouched();
            control?.markAsDirty();
        });
        // 手动触发变更检测，确保状态更新同步到视图
        this.cdr.detectChanges();
        return;
    }
    console.log('success');
}

方案2：遵循Clarity表单规范（更推荐，长期维护成本更低） #

直接使用Clarity提供的表单指令，无需手动处理控件状态，Clarity会自动在表单提交后触发所有无效控件的错误样式。
第一步：给form标签添加clrForm指令，将提交事件绑定为ngSubmit：

<form class="login" [formGroup]="form" clrForm (ngSubmit)="login()">

第二步：提交逻辑中不需要再手动修改任何控件状态：

login(): void {
    if (this.form.invalid) {
        return;
    }
    console.log('success');
}

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