时间戳

首页 > 解决方案 > 在 Angular 4 中使用 ngClass 选择控件验证

angular - 在 Angular 4 中使用 ngClass 选择控件验证

问题描述

在 Angular 反应形式中使用选择控件时，我遇到了一些样式问题。看看我的代码：

<div class="col-md-4">
        <div class="form-group has-feedback" [ngClass]="{ 'has-success': form.controls.field.valid && !form.controls.field.pristine, 'has-danger': !form.controls.field.valid && !form.controls.field.pristine}">
                <label class="form-form-control-label">Field</label>

        <select class="form-control" formControlName="somevalue">
           <option *ngFor="let field of fields" value="{{field.id}}">{{field.name}}</option>
        </select>

        <span class="help-block [style.display]="form.controls.field.valid || form.controls.field.pristine ? 'none': 'inherit'">
           <small *ngIf="form.controls.field.hasError('required')">
               field is required.
           </small>
        </span>

    </div>
 </div>

我对表单中的每个输入都使用这种结构。验证后，此代码工作正常，如果任何字段无效并且由于我在父 div 中使用的 [ngClass] 无效字段的边框变红，它不会提交表单。但是在这个特定的字段中，我使用了选择控件从下拉列表中进行选择，并且在这个字段中显示了验证错误，但没有显示边框上的红色突出显示。我认为有一些默认样式的选择控件会覆盖它。任何人都知道为什么选择控件在无效提交时没有像其他输入字段一样出现红色边框？我在其他字段中使用输入标签。

PS 默认情况下，选择控件的值是未定义的，因此仅当用户在提交前忘记从下拉列表中选择项目时它才无效。

标签： angular

解决方案

我自己找到了解决方案。我发现选择控件具有带有 !important 属性的白色边框样式。这很明显，但在询问时我不知道 !important 的含义。原来，我只需要删除边框样式上的 !important 属性，瞧！它是固定的。

推荐阅读