有條件的ngModel數據綁定

Question

我在Angular4中遇到ngModel的條件數據綁定問題。

爲了解釋：

我有一點點的形式：

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

形式 - 問題 - 無線是我的自定義表單控件（實現ControlValueAccessor）

我想傳遞價值到模型['q4_1']只有當第一個問題的答案有true值。如果回答第一個問題（model ['q4']）具有false,model ['q4_1']將會是null。

當我檢查第一個問題的真實答案時，問題開始，之後檢查第二個問題的一些答案，我再次檢查第一個問題的錯誤anwer。我希望模型['q4_1']值爲null，但不是。

---

我試圖使用條件樣結合：

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

，但它造成的錯誤。

---

我試圖

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

了。但它仍然不起作用，因爲我猜想返回布爾值。是嗎？

---

問： 有沒有辦法有條件通過數據綁定ngModel？它應該是什麼樣子？

Answer 1

解決方案一：

使用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 getter和setter。

模板：

<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; 
    }, 
}