禁用 md-input-container 验证 Angular 2

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

感谢@Nehal 的提示。

我想我刚刚找到了解决方案。不过不是花哨的。

当使用md-input-container 和<input mdInput required> 时，有两个类会绘制无效指标。这些是.mat-input-container 和.mat-input-element。如您所料，删除其中一个的无效指标就像添加

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

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

如果有人有不同的解决方案，那就太棒了，我个人不喜欢 CSS 技巧。

Answer 2

有效的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