Angular2 - 反应形式单选按钮值作为对象答案

【问题标题】：Angular2 - Reactive forms radio button value as objectAngular2 - 反应形式单选按钮值作为对象
【发布时间】：2017-07-14 10:35:09
【问题描述】：

我的组件上有一组单选按钮，它们是简单的 yes 和 no 值。它使用text 作为标签，使用id 作为其值。

我正在尝试分配一个对象作为它的值，以便在我提交表单时，我可以同时访问value 和text。

这是我尝试过的：

<label class="radio-inline">
  <input type="radio" formControlName="changeType" ng-value="{value:0, text:'No'}"> No
</label>
<label class="radio-inline">
      <input type="radio" formControlName="changeType" ng-value="{value:1, text:'Yes'}"> Yes
</label>

当我尝试这个时，我的 reactiveForms 验证失败，因为它是一个必填字段。当其中一个被选中时，如何将这个对象分配到验证将通过的位置？

【问题讨论】：

ng-value 来自 angularjs - 使用 value
@Kai - 当使用value 提交表单时，我的价值就体现出来了：changeType:"{value:2, text:'Yes'}"
Angular 4 的语法是[ngValue]="{....}"
@ThinkingMedia - Can't bind to 'ngValue' since it isn't a known property of 'input'.
哦，您不能在输入时使用 ngValue。对不起。您正在使用响应式表单，因此该值存储在“changeType”的表单控件中

标签： angular typescript

【解决方案1】：

由于我看不到组件代码，因此不太确定表单部分。但是我能够仅使用value 从单选按钮选择中获取对象值。

UPDATE：由于需要传递对象，所以最好在组件中创建，使用[value]绑定对象，传递给表单。我在html 中添加了几行额外的行以显示value 和text 可以访问。

<form class="example-form" (ngSubmit)="submit(addForm.value)" [formGroup]="addForm">
  <label class="radio-inline">
    <input type="radio" formControlName="changeType" [value]="radioItems0"> No
  </label>
  <label class="radio-inline">
        <input type="radio" formControlName="changeType" [value]="radioItems1"> Yes
  </label>
  <p></p>
   <button md-raised-button  type="submit">Submit</button>
</form>

<p>Form values:</p> 
<p>{{ addForm.value | json }}</p>

<p>Selected value: {{ addForm.value.changeType.value }}</p>
<p>Selected text: {{ addForm.value.changeType.text }}</p>

component.ts:

export class InputFormExample {

  radioItems0 = { value: "0", text: "No"}
  radioItems1 = { value: "1", text: "Yes"}

  addForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.addForm = this.fb.group({
      changeType: {}
    });
  }

  submit(form){
    alert(JSON.stringify(form));
  }
}

demo

希望这能解决您的问题:)

【讨论】：

hmm，看起来值是一个字符串？例如，我不能通过form.changeType.text 访问对象的文本值。
我明白你的意思。会回复你的:)
一个简单的问题 - 我仍然可以在这个输入中添加验证器吗？我最初有 changeType: ['', Validators.required], 但不太确定如何使用您的示例使用对象来做到这一点。
你仍然可以这样做，changeType: [{}, Validators.required]，确保你已经导入了Validators，import {Validators} from '@angular/forms';。我已将其添加到演示中。

【解决方案2】：

ng-value 不适用于输入元素。尝试使用更改事件作为

<input type="radio" formControlName="changeType" (change)="radioButtonSelect($event) value=0>No

在事件处理程序中

radioButtonSelect(event){ var text=event.target.value?'No':'Yes'; this.selectedType={value:event.target.value, text:text}; }

【讨论】：