禁用MD-輸入驗證集裝箱角2

我採用了棱角分明2.創建一個表單當我的屬性required添加到我的<input>我得到這個：禁用MD-輸入驗證集裝箱角2

我要的只是第二紅色保證金， 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只有適應容器大小。

來源

2017-06-28 Alberto

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

來源

2017-06-28 00:44:52 Nehal

其實，這給了我一個提示。如果這有效，我會通知你。我認爲這只是解決方案的一半。 – Alberto

我正在進一步研究它，不知道創建左邊紅色邊框的CSS。我也能這樣做https://plnkr.co/edit/KCuvFH2iE4J70dWCyS6S?p=preview – Nehal

我喜歡那樣。它使用CSS內部的角元素。 – Alberto

感謝@Nehal的提示。

我想我剛剛找到了解決方案。雖然不是很花哨。

當使用md-input-container和<input mdInput required>時，有兩個類可以繪製無效指示符。那些是.mat-input-container和.mat-input-element。正如您可以猜到，刪除其中之一的無效指標非常簡單，只需添加

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

這允許我們甚至改變這些驗證的顏色。我希望這對有同樣問題的人有用。

如果有人有不同的解決方案，它將是真棒，我個人不喜歡CSS技巧。

來源

2017-06-28 01:05:19 Alberto

禁用MD-輸入驗證集裝箱角2

回答

相關問題