我可以根據某些條件用特定顏色包圍一個輸入或多個輸入嗎？
所以我的想法是在 TypeScript 中我可以更改、添加或洗掉輸入的周圍顏色，如下圖所示：
現在我正在這樣做：
<tr> [ngStyle]="{ 'background-color': getColorByRegistrationInsertStatus(registration) }"</tr>
然后在我的 TypeScript 的某個地方，我呼叫了這個函式：
getColorByRegistrationInsertStatus(registrationControl: AbstractControl): string {
switch (registrationControl.get('registrationInsertStatus')?.value) {
case RegistrationInsertStatus.Success: return '#52c41a';
case RegistrationInsertStatus.Error: return '#ff6163';
default: return 'white';
}
}
該代碼執行此操作：
- 得到
registrationInsertStatus - 如果是成功則回傳綠色
- 如果是錯誤回傳false
現在這在樣式方面非常難看，所以我可以更改半徑或添加顏色以類似于“適合”內容并具有與下圖相同的內容：
更新
我將此添加到我的CSS：
.ng-select {
&.success {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
}
我可以在我的html上使用它嗎？是這樣嗎？
<ng-select [ng-select.success]="someFunction(someVariable)"></ng-select>
uj5u.com熱心網友回復：
當然可以。使用[ngStyle]是一種選擇。[class.success]="someFunction(someVariable)"如果您想更具體地定義樣式，我建議您使用 CSS 類而不是 (boolean) 之類的東西。
然后，例如，如果您使用 SCSS，則只需&.success { ... }根據您要用于此類的范圍，在正確的位置向樣式表添加類似的內容。
例子：
HTML
<div class="my-class" [class.success]="someFunction(someVariable)"></div>
SCSS
.my-class {
...default style...
&.success {
...styles to apply on success...
}
}
uj5u.com熱心網友回復：
當您將 Angular 中的表單與（反應式）表單模塊一起使用時，它們具有/ng-valid類。ng-invalid
因此，取決于您希望實作的目標：
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/510198.html