角表单验证和引导样式

Question

我对Angular很陌生，我正在尝试使用Angular和Bootstrap 4创建一个注册表单。

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

我使用的是反应形式，我想避免这样的事情（未测试）：

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

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

如果您不使用SASS，安装它是很好的参见这里角CLI SASS选项