角度形式 + bootstrap 'is-invalid', 'is-valid'

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

...
<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 来完成

对于 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; 
}

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

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

此类指示输入控件无效并被 toched ，这意味着您只需要处理样式即可。