css - 禁用 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 技巧。