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

该类表明输入控件无效且已输入，这意味着您只需要处理样式即可。

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}">

Answer 3

您可以在组件中使用通用方法：

isValid(field: string) {
    return (!this._form.get(field).valid && this._form.get(field).touched) ? 'is-invalid' : this._form.get(field).touched ? 'is-valid' : '';
}

然后在您的元素引用中

[class]="isValid('title')"

角形+引导程序“无效”，“有效”

3 个答案: