角度形式+引导“无效”,“有效”

假设我有一个小的形式并使用反应式方法 例如,我有两个输入

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

我要跟踪更改并添加引导程序类,对于适当的情况,“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中有很多“泥”。

因此,如果表单应具有默认样式,则表示已加载该页,并且 输入未被触摸

我发现我能做到这一点,但仍然认为有更好的方法。我的意思是“更好”不会让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

只是我的一小部分贡献,以防引导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; 
}