MdRadioButton 内的 MdInput 不更新表单中的值

MdInput inside a MdRadioButton does not update the value in the form

我正在尝试将 MdInclude 嵌套在 MdRadioButton 中,也就是说,如果我 select 一个特定的 button/value 一个额外的输入字段(与之关联特定按钮)已启用,例如

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>

这是相关的脚本:

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

(这里有一个 plnkr,用来玩玩)。该表单似乎可以正常工作,但在提交时 address 的值未包括在内(假设我选择了 'Different Address')。在检查 this.form.controls 时,我注意到 disabled 仍设置为 true,这可能是该值不存在的原因。

但是,我在上面的事件处理程序中明确启用了该控件,那么我在这里缺少什么?

我明白了。这里的问题是,一旦我在 MdInput 中输入文本并点击 "Submit",同一控件就会触发其自身的 change() 事件,这些事件会冒泡到 MdRadioGroup.

事件处理程序然后查看 value,即 undefined 并再次禁用 MdInput,这就是表单忽略其值的原因。