如何以反应形式传递单选按钮的值？

Question

我有 Angular2 的 RC5 版本我有这样的东西，有几个

<input formControlName="uploadType" id="upload_type-parts_service" name="uploadType" value="parts_service" type="radio" />

我绑定了一个onchange

(change)=onUploadTypeChange( ??? )

然后我在我的js中定义了函数

onUploadTypeChange( uploadType ) {
    this.uploadType = ...
}

我在尝试获取单选按钮值时遇到了困难。我的计划是将它传递给 onchange 函数并更新视图中 show/hide 某些元素的 uploadType 值。我试过传递 this 或 this.value 或 this.type.controls.uploadType.value 但没有任何效果。 type 是表单本身。

有人可以指出我如何在反应形式中获得价值吗？

Answer 1

感谢msanford在评论中的问题，我发现$event需要通过

onUploadTypeChange( $event )

然后在我的 js 中

onUploadTypeChange( e ) {
    this.uploadType = e.target.value;
}

targetreturns输入本身

我将 radio 的值与 [value]=... 绑定在一起，但这对于 reactiveforms 来说并不需要，而且它会导致问题。我只用 values="..."

设置值

现在一切正常，{{ this.type.controls.uploadType.value }} 打印预期值

Answer 2

你试过这样的事情吗？这会监视值变化并将订阅置于 ngAfterViewInit() 方法中。

<div class="form-group" [ngClass]="{'has-error': displayMessage.Repeatable }">
      <label class="control-label" for="Repeatable">Repeatable</label>
      <input type="radio" id="Repeatable" [checked]="checked" 
          formControlName="Repeatable" />{{repeatableValue | uppercase}}              
</div>

// Component

ngAfterViewInit(): void {
    console.log('ngAfterViewInit');

    this.setForm.get('Repeatable').valueChanges.subscribe(value => this.repeatableValue = value.toString());
}

如何以反应形式传递单选按钮的值？

How to pass value for radio button in reactive form?

javascript

angular

angular-reactive-forms