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