Angular2 - 作爲對象的反應表單單選按鈕值

我的組件上有一組單選按鈕，這些按鈕是簡單的yes和no值。它使用text作爲標籤，id作爲其值。Angular2 - 作爲對象的反應表單單選按鈕值

我想分配一個對象作爲它的值，這樣當我提交我的表單時，我可以同時訪問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爲必填字段。如何在分配其中一個選項時驗證通過的對象？

來源

2017-07-14 SBB

'NG-value'是angularjs - 使用'value' – Kai

@Kai - 我的價值在於通過這樣當使用'value'提交表單時：'changeType：「{value：2，text：'Yes'}」< - - 將其視爲字符串 – SBB

Angular 4的語法爲'[ngValue] =「{... }'' – cgTag

因爲我看不到組件代碼，所以不太確定窗體部件。但是我能用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

希望這樣可以解決你的問題:)

來源

2017-07-14 02:09:11 Nehal

嗯，它看起來像值是一個字符串，但？例如，我不能通過'form.changeType.text'來訪問對象的文本值。 – SBB

我明白你的意思了。將回到你:) – Nehal

@SBB，請檢查更新的答案，請:) :) – Nehal

ng-value不會輸入元素上工作。嘗試使用change事件

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

來源

2017-07-14 02:11:23

Angular2 - 作爲對象的反應表單單選按鈕值

回答

相關問題