输入具有.ng-invalid时更改标签颜色

时间:2018-01-08 09:11:01

标签: css angular

我的表单构建为模板驱动

<div class="form-group">

    <label for="guitar" class="col-sm-6">Guitar:</label>

    <div class="col-sm-6">
        <input id="guitar" type="text">
        <p *ngIf="template driven template ngIf">Warning!</p>
    </div>

</div>

当我在<input id="guitar">输入无效字符时,<input>将获得样式:

border: 2px solid red来自:

input.form-control.ng-invalid.ng-touched {
  border: 2px solid red;
}

并显示<p>Warning!</p>

效果很好。

是否可以更改颜色:

<label for="guitar">Guitar:</label>
显示<p>Warning!</p>并且<input>边框

红色

2 个答案:

答案 0 :(得分:1)

您回答了自己的问题:如果您有此条件会显示警告信息

*ngIf="template driven template ngIf"

为什么不简单地将此条件应用于您的输入?

<input id="guitar" type="text" [class.red]="template driven template ngIf">
.red { color: red; }

答案 1 :(得分:0)

我认为你只能通过抓取输入的ngModel指令实例的句柄来实现这个目的

<input ... [(ngModel)]="..." #whateverInput="ngModel" ... />

然后使用标签

<label for="..." [class.ng-invalid]="whateverInput.invalid" ...></label>

(然后将标签设置为.ng-invalid

人们也可以想到一种使用指令自动执行此操作的方法,但没有给予足够的考虑。

希望这有帮助!