Question

我正在使用Angular 2创建表单。当我将required属性添加到<input>时，我得到了这个：

我想要的只是第二个红色边距，即input标记之一，而不是属于md-input-container的第一个边距。

有没有办法禁用其中一个边距？

html代码：

<h2 class="mmm">Create building</h2>
<form #buildingForm="ngForm" (ngSubmit)="onSubmit(buildingForm.value)">
  <div class="form-group">
    <md-input-container>
      <input type="text" #nameRef mdInput required placeholder="Building name" name="name" ngModel>
    </md-input-container>
  </div>
    <button type="submit" md-raised-button color="accent" class="pull-right">{{title}}</button>
</form>

的CSS：

md-input-container input {
  width: 400px;
  font-size: 1.5em;
}

如您所见，我的css只调整容器大小。

Answer 1

css类有效：

.ng-invalid:not(form).mat-input-element  {
  border-left: 5px solid #a94442; /* red */
}

原始提示：

.mat-input-element{
  background-color: skyblue; /* replace with your color value */
}

demo

Answer 2

感谢@Nehal提示。

我想我刚刚找到了解决方案。虽然不是一个花哨的。

将md-input-container与<input mdInput required>一起使用时，会有两个类绘制无效指标。这些是.mat-input-container和.mat-input-element。您可以猜测，删除其中一个的无效指标就像添加

一样

.(mat-input-container or mat-input-element) {
    border-left: none;
}

这使我们甚至可以更改这些验证的颜色。我希望这对有同样问题的人有用。

如果有人有不同的解决方案，那将是非常棒的，个人而言，我不喜欢CSS技巧。

禁用md-input-container验证Angular 2

2 个答案: