MdRadioButton中的MdInput不會更新表格中的值

我試圖在中嵌套MdInclude，也就是說，如果我選擇了特定的按鈕/值，則額外的輸入字段（與該特定按鈕關聯）爲例如MdRadioButton中的MdInput不會更新表格中的值

Shipping 

O - Same Address 
X - Different Address ...........

對我來說這是一個很常見的情況。

我試着去了解它的方式如下：

<form role="form" [formGroup]="form" (ngSubmit)="submit()"> 
    <md-radio-group formControlName="shipping" (change)="shippingChange($event)"> 
    <md-radio-button value="same">Current Address</md-radio-button> 
    <md-radio-button value="different"> 
     <span>Different Address:</span> 
     <md-input-container> 
     <input mdInput placeholder="Address" formControlName="address"> 
     </md-input-container> 
    </md-radio-button> 
    </md-radio-group> 
    <button md-raised-button type="submit">OK</button> 
    <h4>Shipping: {{shipping}}</h4> 
    <h4>Address: {{address}}</h4> 
</form>

和這裏的相關的腳本：（在這裏是一個plnkr，玩具左右）

public ngOnInit() { 
    this.form = this.formBuilder.group({ 
     shipping: 'same', 
     address: { value: '', disabled: true } 
    }); 
} 

public shippingChange($event) { 
    if ($event.value === 'different') { 
     this.form.get('address').enable(); 
    } else { 
     this.form.get('address').disable(); 
    } 
} 

public submit() { 
    if (this.form.valid) { 
    this.shipping = this.form.value.shipping; 
    this.address = this.form.value.address; 
    } 
}

。該表格似乎正在工作，但提交address的價值不包括在內（假設我選擇了「不同地址」）。在檢查this.form.controls時，我注意到disabled仍然設置爲true，這可能是該值不存在的原因。

但是，我明確在上面的事件處理程序中啓用了該控件，所以我在這裏丟失了什麼？

來源

2017-05-10 Thorsten Westheider

如果我的問題得到了很好的解答，即使它已被禁用，您也試圖獲得控件的值。這樣對嗎？如果是這樣，請使用'form.getRawValue（）'而不是'form.value'。 – developer033

不是，控件已啓用，只是表單仍然認爲它不是。 –

我想通了。這裏的問題在於，只要我在MdInput中輸入文本並點擊「提交」，同一控件就會觸發change()自己的事件，該事件會冒泡至MdRadioGroup。

事件處理程序然後查看value，這是undefined並再次禁用MdInput，這就是表單忽略其值的原因。

來源

2017-05-10 12:57:20

MdRadioButton中的MdInput不會更新表格中的值

回答

相關問題