禁用md-input-container验证Angular 2

Question

I'm creating a form using Angular 2. When I add the attribute required to my <input> I got this:

What I want is just the second red margin, the one of the input tag, instead of the first margin that belongs to the md-input-container .

Is there a way to disable one of those margins?

html code:

<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;
}

As you can see, my css only adapts the container size.

Answer 1

css class that works:

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

original hint:

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

demo

Answer 2

Thanks to @Nehal for the hint.

I think I just found a solution. Not a fancy one though.

When using md-input-container with an <input mdInput required> there are two classes that draw the invalid indicator. Those are .mat-input-container and .mat-input-element . As you can guess, removing the invalid indicator of one of them is simply as adding

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

This allow us to even change the color of these validations. I hope this will be useful for someone that have the same problem.

If anyone have a different solution it will be awesome, personally, I don't like CSS tricks.