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

Question

我正在尝试将 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，这可能是该值不存在的原因。

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

Answer 1

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

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

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

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

angular

angular-material2

angular-reactive-forms