Question

我的组件上有一组简单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验证作为必填字段失败。当选择其中一个时，如何将此对象分配给验证通过的位置？

Answer 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

希望这可以解决您的问题：）

Answer 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}; }

Angular2 - Reactive将单选按钮值表示为对象

2 个答案: