Условная привязка данных ngModel

У меня проблема с условной привязкой данных ngModel в Angular4.

Объяснять:

У меня небольшая форма:

<form-question-radio
  [(ngModel)]="model['q4']"
  name="question"
  [options]="[{value:true, label:'Yes'}, {value:false,label:'No'}]"
  required>
      Do you want?
</form-question-radio>

<ng-container *ngIf="model['q4'] == true">
  <form-question-radio
    [(ngModel)]="model['q4_1']"
    name="question4_1"
    [options]="[
      {value:1,label:'Freedom'},
      {value:2,label:'Peace'},
      {value:3,label:'Money'}
    ]" required>
      What do you want?
  </form-question-radio>
</ng-container>

form-question-radio - это мой настраиваемый элемент управления формой (реализует ControlValueAccessor)

Я хотел бы передать значение в model ['q4_1'] только тогда, когда ответ на первый вопрос имеет значение true. Если ответ на первый вопрос (model ['q4']) имеет false, model ['q4_1'] будет нулевым.

Проблема начинается, когда я проверяю истинный ответ на первый вопрос, затем проверяю какой-нибудь ответ на второй вопрос, и я проверяю (снова) ложный ответ на первый вопрос. Я бы хотел, чтобы значение model ['q4_1'] было равно null, но это не так.

Я пытался использовать условную привязку, например:

[(ngModel)]="model['q4'] == true ? model['q4_1'] : null"

но это вызвало ошибку.

я пытался

[(ngModel)]="model['q4'] && model['q4_1']"

слишком. Но это все равно не работает, потому что, я думаю, возвращает логическое значение. Это?

Вопрос: Есть ли способ условной привязки данных с помощью ngModel? Как это должно выглядеть?


angular angular-forms angular-ngmodel
person Jaroslaw K.    schedule 04.10.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Первое решение:

Используйте ngModelChange. Это событие, которое по умолчанию всегда записывает новое значение в модель при изменении входного значения, но его можно переопределить. Он будет автоматически генерироваться для каждого компонента, использующего ngModel, поэтому вам не нужно об этом беспокоиться.

В шаблоне:

<form-question-radio
  [ngModel]="model['q4_1']"
  (ngModelChange)="questionQ4Change($event)">
</form-question-radio>
<form-question-radio
  [ngModel]="model['q4_1']"
  (ngModelChange)="questionQ41Change($event)">
</form-question-radio>

В контроллере:

questionQ4Change(newValue) {
  this.model['q4'] = newValue;
  if (!newValue) {
    this.model['q4_1'] = null;
  }
}
questionQ41Change(newValue) {
  this.model['q4_1'] = this.model['q4'] ? newValue : null;
}

Второе решение:

Вы также можете использовать геттеры и сеттеры для q4 и q_1.

В шаблоне:

<form-question-radio
  [(ngModel)]="model['q4_1']"
</form-question-radio>
<form-question-radio
  [(ngModel)]="model['q4_1']"
</form-question-radio>

В контроллере:

model = {
  q_4_value: null,
  q4_1_value: null,

  get q_4() { 
    return this.q_4_value;
  },
  get q4_1() {
    return this.q4_1;
  },

  set q_4(newValue) { 
    this.q_4_value = newValue;
    if (!newValue) {
      this.q4_1_value = null;
    }
  },
  set q4_1(newValue) {
    this.q4_1_value = this.q_4 ? newValue : null;
  },
}
person Senthe    schedule 04.10.2017
comment
для меня это не решение. Он все еще меняется, когда я меняю q4_1, но мне нужно изменить значение q4_1, когда q4 ложно / истинно. Я могу понять, как работает ваше решение, но я ищу универсальное решение, если вы понимаете, о чем я - person Jaroslaw K.; 04.10.2017
comment
Хорошо, тогда вы можете использовать другое событие questionQ4Change, и в этом случае вы можете как установить новое значение q4, так и, при необходимости, изменить значение q4_1. - person Senthe; 05.10.2017
comment
Я добавил еще одно решение с сеттерами, хотя думаю, что это посложнее. - person Senthe; 05.10.2017