title: Conditional ngModel data binding
body: <p>I have a problem with conditional data binding by ngModel in Angular4.</p>
  
  <p>To explain: </p>
  
  <p>I have a little form:</p>
  
  <pre><code>&lt;form-question-radio
    [(ngModel)]="model['q4']"
    name="question"
    [options]="[{value:true, label:'Yes'}, {value:false,label:'No'}]"
    required&gt;
        Do you want?
  &lt;/form-question-radio&gt;
  
  &lt;ng-container *ngIf="model['q4'] == true"&gt;
    &lt;form-question-radio
      [(ngModel)]="model['q4_1']"
      name="question4_1"
      [options]="[
        {value:1,label:'Freedom'},
        {value:2,label:'Peace'},
        {value:3,label:'Money'}
      ]" required&gt;
        What do you want?
    &lt;/form-question-radio&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>form-question-radio is my custom form control (implements <em>ControlValueAccessor</em>)</p>
  
  <p>I would like to pass value to <em>model['q4_1']</em> only when answer for first question has <strong>true</strong> value. If answer for first question (<em>model['q4']</em>) has <strong>false</strong>, <em>model['q4_1']</em> would be <strong>null.</strong></p>
  
  <p>The problem starts when I check true answer for first question, afterwards check some answer for second question and i check (again) false anwer for first question. I would like the <em>model['q4_1']</em> value to be equal null, but isn't.</p>
  
  <hr>
  
  <p>I was trying use conditional binding like:</p>
  
  <pre><code>[(ngModel)]="model['q4'] == true ? model['q4_1'] : null"
  </code></pre>
  
  <p>but it caused error.</p>
  
  <hr>
  
  <p>I was trying</p>
  
  <pre><code>[(ngModel)]="model['q4'] &amp;&amp; model['q4_1']"
  </code></pre>
  
  <p>too. But it still doesn't work, because returns boolean I guess. Is it? </p>
  
  <hr>
  
  <p><strong>Question:</strong>
  Is there a way to conditional data binding by ngModel? How it should look like?</p>