angular5 表單元素 checkbox radio 組講解

一.checkedbox

1.ngModel綁定方式

<input [(ngModel)]="item.checked"
       value="item.checked"
       name="facilityList{{i+1}}"
       (click)="selectThisFacility(item)"
       class="week-checkbox"
       type="checkbox"
       data-code="item.code">
此時點擊checkbox，checkbox的checked屬性會隨之改變，因為ngModel綁定的就是他的checked屬性值此時的[(ngModel)]相當於[(checked)]

2 使用checked屬性

<input [checked]="item.checked"
       name="serviceCheckList{{i+1}}"
       (click)="selectThisService(item)"
       class="week-checkbox"
       type="checkbox"
       data-code="item.code">
此時點擊checkbox[checked]只會改變，但是item.checked不會變  [checked]是單項綁定不會改變item.checked


注意angular5表單元素需要有name且不能相同必須唯一 ，要么添加上ngModelOption={standalone:true};


二：radio

最好使用以下方法

      <input name='mapZoomLevel' type="radio"
                      [checked]="item.code==tempzoomLevel"
                      (click)="zoomChange(item)">{{item.name}}