Question

在以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]，无效字段的边框会变为红色，它不会提交表单。但是在此特定字段中，我已使用select控件从下拉菜单中进行选择，并且在此字段中显示了验证错误，但未显示边框上的红色突出显示。我认为有一些默认的选择控件样式可以替代此样式。有谁知道为什么选择控件在无效提交时不会像其他输入字段一样显示红色边框？我在其他字段中使用输入标签。

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

Answer 1

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

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

1 个答案: