[英]how to bind two-way radio button in angular 2
這是我的代碼,在姓氏中,我使用了ngModel,因此它使用雙向數據綁定,但在單選按鈕中我是如何使用ngModel進行雙向數據綁定的。
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !lastname.valid }">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="last_name" [(ngModel)]="employee.last_name" #lastname="ngModel" required />
<div *ngIf="f.submitted && !lastname.valid" class="help-block">Last Name is required</div>
</div>
<div class="form-group">
<label>Gender:</label>
<label class="radio-inline">
<input type="radio" name="optradio" [checked]="employee.gender == 'Male'" >Male
</label>
<label class="radio-inline">
<input type="radio" name="optradio" [checked]="employee.gender == 'Female'" >Female
</label>
</div>
對於雙向數據綁定,它與所有其他數據一樣使用此語法[(ngModel)]
用下面的代碼塊替換:
<div class="form-group">
<label>Gender:</label>
<label class="radio-inline">
<input type="radio" name="optradio" value='Male' [(ngModel)]="employee.gender" >Male
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value='Female' [(ngModel)]="employee.gender" >Female
</label>
</div>
你可以試試這個
<div class="form-group">
<label>Gender:</label>
<label class="radio-inline">
<input type="radio" name="gender" [(ngModel)]="employee.gender"
[value]='Male' [checked]="employee.gender == 'Male'" >Male
</label>
<label class="radio-inline">
<input type="radio" name="gender" [(ngModel)]="employee.gender"
[value]='Female' [checked]="employee.gender == 'Female'" >Female
</label>
</div>
此外,您忘記在輸入中添加[value]
屬性,並將input
的name
更改為gender
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.