我的表单构建为模板驱动。
<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>
有边框时到红色?
答案 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
)
人们也可以想到一种使用指令自动执行此操作的方法,但没有给予足够的考虑。
希望这有帮助!