CODEWITHSUNDEEP
javascriptjqueryangular
Dexter
Dexter

Reputation: 528

unable to change the input background based on condition

here below is my JSON data 

data = {
    name: 'paul',
    author: '',
    country: '',
    id: 7465
};

here by using the above data, I am displaying the input and label

 <label class="inline-label" for="{{data.name}}">{{data.name}}</label>

for input 

<input id="{{data.name}}" type="{{data.details.type}}" style=" border-radius:0;" class="form-control error">

here my issue is

  1. I unable to display the input background color based on condition when the input value is empty only for selected one I have other input also it is based on other than I don't want to change

below is the code I have tried

if (data['author'] === '') {
    $('.error').css('background-color', '#fff');
    $('.error')
        .filter(function() {
            return $.trim(this.value) === '';
        })
        .css('border-bottom:', '1px solid #FF0000 !important');
} else {
    $('.error').css({ 'background-color': 'green' });
}

Upvotes: 2

Views: 1642

Answers (4)

Learning
Learning

Reputation: 1413

You can use Angular's ngClass binding to achieve this.

Data sample (.ts Service file returning Observable data): 

  public items = [
    { "name":'paul', "author":'  ', "country":'', "id":7465 },
    { "name":'Jibin', "author":'JQuery', "country":'', "id":7466 }
  ];

Controller sample (.ts file to map another flag field):

import 'rxjs/add/operator/map';

public items = [];
private unsubData = new Subject<void>();

ngOnInit() {
    this.service.dataUpdated
    .takeUntil(this.unsubData)
    .map((data: any) => {
      data.forEach(element => {
        element.flgEmpty = (element['author'].trim() === '') ? true : false;
      });
      return data;
    })
    .subscribe((data: any) => {
      console.log(data);
      this.items = data;
    });
}

ngOnDestroy() {
    this.unsubData.next();
    this.unsubData.complete();
}

HTML sample (.html file):

<div *ngFor="let item of items">
  <label class="inline-label" for="{{item.name}}">{{item.name}}</label>
  <input id="{{item.name}}" type="text" [ngClass]="[item.flgEmpty ? 'form-control error' : 'form-control success']">
</div>

CSS sample (.css file):

.form-control { border-radius:0;}
.error {border-bottom: 1px solid #FF0000;}
.success {background-color: green;}

Upvotes: 1

Juan
Juan

Reputation: 2084

Im not sure if this is what you are looking for, but you can change the background color of the input field based in some condition like this:

StackBlitz example: Change background based on condition

HTML file:

<label class="inline-label" for="{{data.name}}">{{data.name}}</label>

<input [(ngModel)]="input" name="input" type="text" id="{{data.name}}" [class.inputColor]="input">

TS file:

export class AppComponent  {
  name = 'Angular';

  input;

   data = {
    "name":'paul',
    "author":'',
    "country":'',
    "id":7465 ,
  }
}

CSS file:

.inputColor {
  background-color: blue;
  caret-color: white;
  color: white;
}

In this case the background color changes to blue and the letters to white when the input field is not empty.

To your second question, how to check if in a pair-value object the value field is empty you can do the following:

  object = {
    key: 'A',
    value: ''
  }

  isValueEmpty(object) {
    if (!object.value) return true;
    else return false;
  }

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24434

Try this input background color will be red if the name is falsy like empty string

<input type="text" [(ngModel)]="name" [ngStyle]="{'background-color': !name ?'#f00' : '#fff'}" />

Check author proprty 

<input type="text" [(ngModel)]="data.author" [ngStyle]="{'background-color': !data.author ?'#f00' : '#fff'}" />

I will recommend to use angular form you can easy set the style of invalid inputs and don't use jquery

stackblitz

Upvotes: 1

Hana Wujira
Hana Wujira

Reputation: 880

you can use something like this which does not include jquery

.white-background{
background-color
}

`<input id="{{data.name}}" [class.white-background]="!data.author" type="`{{data.details.type}}" style=" border-radius:0;" class="form-control error">

Upvotes: 1

Related Questions