css - Angular 表单验证和 Bootstrap 样式

Question

我是 Angular 的新手，我正在尝试使用 Angular 和 Bootstrap 4 创建注册表单。

我想要的结果是使用 Bootstrap 的样式和 Angular 的验证。 更准确地说，在验证表单时，Angular 在两个不同的地方应用样式(ng-valid、ng-invalid 等):输入元素和表单元素。

两个问题:

1) 由于 Bootstrap 使用“has-danger”和“has-success”而不是“ng-[in]valid”，是否可以配置 angular 以使用这些样式而不是默认样式。目前，我正在考虑通过添加 Angular 样式(使用@extend has-danger/success)来扩展 Bootstrap

2) Angular 将样式应用于输入和表单元素，而 Bootstrap 期望它应用于表单组元素。是否可以让 Angular 将样式放在那里而不是输入元素(或两者？)

我正在使用响应式(Reactive)表单，我想避免类似(未测试)的事情:

<form>
    <div class="form-group" [class.has-error]="!fg.get('username').valid" [class.has-success]="fg.get('username').valid">
        <label>Username</label>
        <input formControlName="username" type="text"/>
    </div>
</form>

是否有一种简单的方法(不是太冗长)来实现这一点？

Answer 1

如果您使用的是 SASS，则无需重写所有 css 即可执行以下操作。

.ng-touched.ng-invalid {
  @extend .is-invalid;
}

注意:您需要导入 bootstrap 作为 SASS 构建的一部分，而不是直接引用它。

如果你不使用 SASS，安装它非常好，请看这里 Angular CLI SASS options