角度形式 + 引导程序 'is-invalid', 'is-valid'

Question

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

...
<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; 
}

Answer 1

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

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

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

Answer 2

很简单！

您只需[ngClass]在模板中正确设置并使用 # 和 ngModel 值（例如 ）命名字段表单#myfieldname="ngModel"。如果您使用 Bootstrap，则可以使用is-valid和is-invalid classes，如下所示：

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