невозможно изменить фон ввода в зависимости от условия

Question

здесь ниже мои данные JSON

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

здесь, используя вышеуказанные данные, я отображаю ввод и метку

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

для ввода

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

здесь моя проблема

1. Я не могу отобразить цвет фона ввода на основе условия, когда входное значение пусто только для выбранного, у меня есть другой ввод, и он основан на другом, чем я нея хочу изменить

ниже приведен код, который я пробовал

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

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">

Answer 2

Попробуйте этот фоновый цвет ввода будет красным, если имя ложное, как пустая строка

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

Проверьте автора proprty

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

Я рекомендую использовать угловую формуВы можете легко установить стиль недопустимых вводов и не использовать jquery

stackblitz

Answer 3

Для этого можно использовать привязку Angular ngClass.

Пример данных (файл службы .ts, возвращающий наблюдаемые данные):

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

Пример контроллера (файл .ts для сопоставления другого флагаполе):

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 (файл .html):

<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 (файл .css):

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

Answer 4

Я не уверен, что это то, что вы ищете, но вы можете изменить цвет фона поля ввода, исходя из следующих условий:

Пример StackBlitz: Изменить фон в зависимости от условия

Файл HTML:

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

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

Файл TS:

export class AppComponent  {
  name = 'Angular';

  input;

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

Файл CSS:

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

В этом случае фонцвет меняется на синий, а буквы на белый, когда поле ввода не пустое.

На ваш второй вопрос, как проверить, является ли поле значения пары пустым, вы можете сделать следующее:

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

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