Question

我正在尝试将MdInclude嵌套在MdRadioButton内，也就是说，如果我选择特定按钮/值，则会启用其他输入字段（与该特定按钮相关联），例如

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的值不包含在内（假设我选择了“不同地址”）。在检查this.form.controls时，我注意到disabled仍设置为true，这可能是该值不存在的原因。

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

Answer 1

我明白了。这里的问题是，只要我在MdInput中输入文字并点击“提交”，相同的控件就会触发自己的change()个事件，这些事件会冒出MdRadioGroup。

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

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

1 个答案: