在 Angular 表单验证期间添加 CSS 类答案

【问题标题】：Add CSS class during Angular form validation在 Angular 表单验证期间添加 CSS 类
【发布时间】：2021-01-25 09:30:20
【问题描述】：

我想在验证表单时添加自定义类名

我现在用ngClass`来实现，但是这个很麻烦，有没有更简单的方法来实现

<input formControlName="username"
  [ngClass]="{
    'my-invalid': username.invalid,
    'my-valid': username.valid
  }"
/>

【问题讨论】：

“很麻烦”是什么意思？

标签： angular

【解决方案1】：

您可以绑定到[class.]

<input formControlName="username" 
  [class.my-invalid]='username.invalid'
  [class.my-valid]='username.valid'
/>

更简单，更容易进行更改

【讨论】：

您能解释一下如何更简单、更容易地进行更改吗？
这个确实不错，但是有没有其他更简单的方法XDD
使用指令或角度配置
@ThomasSablik 这种方法避免了在使用[ngClass]时在html上创建对象@
是的，您更改了语法。您正在使用两个指令而不是一个。但请比较 OP 的代码和您的代码。几乎没有区别。这如何增加可用性？它如何使任何事情变得更简单或更容易改变？您能否提供一个示例，说明通过此更改变得更简单的代码？您提供了不同的代码来实现相同的结果，但恕我直言，这绝不是更简单或更容易。

【解决方案2】：

现在容易多了

import { Directive, HostBinding } from '@angular/core';
import { NgControlStatus } from '@angular/forms';

@Directive({
  selector: '[appBsFormControl]',
})
export class BsFormControlDirective {
  constructor(private ngControlStatus: NgControlStatus) {}

  @HostBinding('class.is-valid')
  get valid() {
    return this.ngControlStatus.ngClassValid;
  }

  @HostBinding('class.is-invalid')
  get invalid() {
    return this.ngControlStatus.ngClassInvalid;
  }
}

<input class="form-control" formControlName="username" appBsFormControl />

【讨论】：

我看到了更好的代码here