0

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

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

4

1 回答 1

0

我想到了。这里的问题是，只要我输入文本MdInput并点击“提交”，同一个控件就会触发change()它自己的事件，这些事件会冒泡到MdRadioGroup.

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

于 2017-05-10T12:57:20.163 回答