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

【问题标题】：How to pass value for radio button in reactive form?如何以反应形式传递单选按钮的值？
【发布时间】：2017-07-18 07:37:18
【问题描述】：

我有 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 函数并更新在视图中显示/隐藏某些元素的uploadType 值。我试过通过this 或this.value 或this.type.controls.uploadType.value 但没有任何效果。 type 是表单本身。

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

【问题讨论】：

Maybe this article can help
@DomeTune 我读过那个，但里面没有收音机。事实上，我找不到关于反应式无线电处理的好资源
查看我的其他问题：stackoverflow.com/questions/42443903/…
@msanford 好的，我通过了$event 并且能够获得很棒的值，但是当我尝试打印{{ this.type.controls.uploadType.value }} 时，它没有打印任何东西。我知道这是有效的，因为初始值有效。这可能是什么原因造成的？
@msanford 我刚刚想通了，我会发布答案，你的问题确实有帮助，谢谢

标签： javascript angular reactive-forms

【解决方案1】：

感谢msanford在cmets的提问，我发现$event需要通过

onUploadTypeChange( $event )

然后在我的js中

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

target 返回输入本身

我将无线电的值与[value]=... 绑定，但这对于反应形式来说是不需要的，它会导致问题。我只用values="..."设置值

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

【讨论】：

【解决方案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());
}

【讨论】：

我没有尝试这个，因为我不想使用订阅。我认为在我的情况下不需要它，但感谢您的输入