javascript - unable to change the input background based on condition

Question

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' });
}

标签： javascriptjqueryangular

Answer 1

你可以使用这样的东西，它不包括 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">