Is it possible to surround an input field or select with a color dynamically?-CodePudding

Can I surround an input or multiples inputs with a specific color, based on some conditions?

So the idea would be that within TypeScript I can change, add or remove the surrounding color of an input like image below:

Right now I am doing this:

<tr>  [ngStyle]="{ 'background-color': getColorByRegistrationInsertStatus(registration) }"</tr>

And then somewhere in my TypeScript I am calling this function:

getColorByRegistrationInsertStatus(registrationControl: AbstractControl): string {
    switch (registrationControl.get('registrationInsertStatus')?.value) {
      case RegistrationInsertStatus.Success: return '#52c41a';
      case RegistrationInsertStatus.Error: return '#ff6163';
      default: return 'white';
    }
  }

That code does this:

get the registrationInsertStatus
if is Success then return green
if it is Error return false

Now that is very ugly in terms of style so can I change the radius or add a color to sort of like "fit" content and have the same like below image:

UPDATE

I added this to my css:

.ng-select {
    &.success {
        outline: none !important;
        border:1px solid red;
        box-shadow: 0 0 10px #719ECE;
    }
}

Ho can i use it on my html? Is it like this?

<ng-select [ng-select.success]="someFunction(someVariable)"></ng-select>

CodePudding user response：

Of course you can. Using [ngStyle] is an option. I'd recommend using CSS classes instead with something like [class.success]="someFunction(someVariable)" (boolean) if you want to define style more specifically.

Then if you are using SCSS for example you just have to add something like &.success { ... } to your stylesheet at the right place depending on the scope you want to use for this class.

example:

HTML

<div  [class.success]="someFunction(someVariable)"></div>

SCSS

.my-class {

  ...default style...

  &.success {
    ...styles to apply on success...
  }

}

CodePudding user response：

Forms in angular have a ng-valid / ng-invalid class when you use them with the (reactive) forms module.

So depending on what you wish to achieve :


input.ng-invalid {
  border: 1px solid red;
}

input.ng-valid {
  border: 1px solid green;
}