我正在尝试为 <ion-select>
的标签设置样式输入,无法让它工作。似乎 ionic 会自动添加 ng-invalid
类到 ion-select
DOM 元素,而是 <label>
因为输入在 DOM 的上游,所以我无法设置它的样式。
我的 html:
<ion-item>
<ion-label>Type of Weigh In</ion-label>
<ion-select [(ngModel)]="check_in.type_of_weighin" name="type_of_weighin" interface="action-sheet" required #type_of_weighin="ngModel">
<ion-option value="standard">Standard</ion-option>
<ion-option value="LM">Limited Maintenence</ion-option>
<ion-option value="FM">Full Maintenence</ion-option>
</ion-select>
</ion-item>
渲染 DOM:
<ion-item class="item item-block item-ios item-select input-has-value">
<div class="item-inner">
<div class="input-wrapper">
<ion-label class="label label-ios" id="lbl-103">Type of Weigh In</ion-label>
<ion-select interface="action-sheet" name="type_of_weighin" required="" class="select select-ios ng-untouched ng-pristine ng-invalid">
<div class="select-placeholder select-text"></div>
<div class="select-icon">
<div class="select-icon-inner"></div>
</div>
<button aria-haspopup="true" class="item-cover" ion-button="item-cover" id="sel-103-0" aria-labelledby="lbl-103" aria-disabled="false" style="transition: none;"></button>
</ion-select>
</div>
</div>
<div class="button-effect"></div>
</ion-item>
是否有另一种方式来设置 <label>
的样式? ?
最佳答案
考虑到由 ionic 完成的重新格式化,我不知道有什么方法可以直接使用 css 来完成,但是您可以附加一些 eventListeners 并根据更改进行更新。
HTML
<ion-item>
<ion-label [class.is-invalid]="inputsInvalid.type_of_weighin">Type of Weigh In</ion-label>
<ion-select [(ngModel)]="check_in.type_of_weighin" name="type_of_weighin" interface="action-sheet" required #type_of_weighin="ngModel" (change)="checkValid($event)">
<ion-option value="standard">Standard</ion-option>
<ion-option value="LM">Limited Maintenence</ion-option>
<ion-option value="FM">Full Maintenence</ion-option>
</ion-select>
</ion-item>
TS
inputsInvalid = {};
checkValid(e) {
const el = e.target;
inputsInvalid[el.id] = el.classList.contains('ng-invalid');
}
SCSS/CSS
ion-label.is-invalid {
...
}
希望这是有道理的。
关于javascript - ionic 2 : Style ion-select with validation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45553199/