Angular 形式 + Bootstrap 'is-invalid' , 'is-valid'

Question

想象一下我有一个小表格并使用响应式(Reactive)方法
例如，我有两个输入

...
<input formControlName="name" name="name" type="text" class="form-control">
<input formControlName="amount" name="amount" type="text" class="form-control">
...

我想跟踪更改并为适当的情况添加 bootstrap 类“is-valid”/“is-invalid”。
问题是，我认为我能做到的唯一方法是:

<input formControlName="name" name="name" type="text" class="form-control"
                 [ngClass]="name.invalid && name.touched ? 'is-invalid' : ''">

在 ts 文件中:

ngOnInit() {
    ...
    this.name = this.shoppingListForm.get('name');
  }

有没有更好的办法。对我来说真正烦人的是 html 中有很多“泥巴”。

So, if form should has default style, it means the page was loaded and input wasn't touched

我发现我可以做到这一点，但仍然猜测有更好的方法。 “更好”是指不会让 html 变得如此脏

<input formControlName="name" name="name" type="text" class="form-control"
[ngClass]="{'is-invalid': name.invalid && name.touched, 
            'is-valid': name.valid, '': name.untouched}"

任何帮助表示赞赏)

正如@Muhammed 在下面所说的，做我需要做的最好的方法是通过 css

Just small contribution of mine in case of bootstrap 4.

问题是它添加了边框阴影，所以对我来说完整的解决方案是这样的:
对于无效输入

input.ng-invalid.ng-touched{ 
    border-color: rgba(255,10,29,1) !important; box-shadow: none !important; 
} 

如果它是聚焦的，那么让边框看起来不错

input.ng-invalid.ng-touched:focus{ 
    box-shadow: 0 0 0 0.2rem rgba(255,10,29,0.25) !important; 
}

Answer 1

您不需要添加与表单控件状态更改 Angular 相关的任何类默认情况下执行此操作您只需要添加与这些类相关的样式

input.ng-invalid.ng-touched {
    border: 1px solid red;
 }

这个类表示输入控件无效并且是 toched ，这意味着您只需要处理样式。