[英]Angular 2 - ngModel not checking Checkbox
I'm trying to create a gender selection view, having Male, Female and Other (caitlyn jenner kind of stuff). 我正在尝试创建具有性别,男性和其他(caitlyn jenner之类的东西)的性别选择视图。
What I currently have is this: 我目前所拥有的是:
Having SVG next to the label of the checkbox (checkbox will be hidden in production, now visible in plunkr for debugging purpose) 在复选框的标签旁边放置SVG(复选框将在生产环境中隐藏,现在在plunkr中可见以进行调试)
But when I click on 'female' it changes focus to the checkbox instead of checking it. 但是,当我单击“女性”时,它会将焦点更改为复选框,而不是选中它。
Plunkr: http://plnkr.co/edit/Z0Dq2sfJaBrE6Mae2Kg1?p=info Plunkr: http ://plnkr.co/edit/Z0Dq2sfJaBrE6Mae2Kg1?p = info
Code: 码:
css 的CSS
svg {
width: 15px; height: 15px;
border: 2px solid #a13b4a;
}
label {
display: inline-block;
padding-left: 1.5em;
position: relative;
cursor: pointer;
color: black;
}
input[type="checkbox"] {
opacity: 0;
width: 15px;
height: 15px;
}
label svg path {
transition: stroke-dashoffset .4s linear;
}
input[type="checkbox"]:checked ~ label svg path {
stroke-dashoffset: 0;
}
input[type="checkbox"]:checked ~ label {
color: #a13b4a;
}
html html
<div>
<input type="checkbox" id="male" [(ngModel)]="isMale" name="isMale"/>
<label (click)="select('male')" for="male">Male
<svg (click)="select('male')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,2 C13.4580219,4.16027394
1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896
41.321398,1.67860195 39,4 C36.1186011,6.88139893.11316157,27.1131616 5,29 C10.3223659,34.3223659
30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697
46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498
17,34 C17,40.4724865 54,12.4064021 54,17
C54,23.7416728 34,27.2286213 34,37"
id="male-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg>
</label>
</div>
<div>
<input type="checkbox" id="female" [(ngModel)]="isFemale" [checked]="isFemale" name="isFemale"/>
<label for="female" (click)="select('female')">Female
<svg (click)="select('female')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,2 C13.4580219,4.16027394
1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896
41.321398,1.67860195 39,4 C36.1186011,6.88139893.11316157,27.1131616 5,29 C10.3223659,34.3223659
30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697
46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498
17,34 C17,40.4724865 54,12.4064021 54,17
C54,23.7416728 34,27.2286213 34,37"
id="female-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg>
</label>
</div>
<div>
<input type="checkbox" id="other" [(ngModel)]="isOther" name="isOther"/>
<label for="other" (click)="select('other')">Other
<svg (click)="select('other')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,2 C13.4580219,4.16027394
1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896
41.321398,1.67860195 39,4 C36.1186011,6.88139893.11316157,27.1131616 5,29 C10.3223659,34.3223659
30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697
46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498
17,34 C17,40.4724865 54,12.4064021 54,17
C54,23.7416728 34,27.2286213 34,37"
id="other-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg>
</label>
</div>
TS TS
public isMale:boolean;
public isFemale:boolean;
public isOther:boolean;
constructor() {
this.isMale = true;
this.isFemale = false;
this.isOther = false;
}
select(gender:string){
console.log("switch");
switch(gender){
case 'male': {
console.log("male");
this.isMale = true;
this.isOther = false;
this.isFemale = false;
break;
}
case 'female' : {console.log("female");
this.isFemale = true;
this.isOther = false;
this.isMale = false;
break;
}
default: {console.log("default");
this.isFemale = false;
this.isMale = false;
this.isOther = true;
}
}
console.log("status: male:"+this.isMale+";;female:"+this.isFemale+";;other:"+this.isOther);
}
There are two issues with your implementation. 您的实现有两个问题。
[(ngModel)]
here, because you are updating the value from your controller. [(ngModel)]
,因为您正在从控制器更新值。 Just reflect the state to the checkbox with the [checked]
directive [checked]
指令将状态反映到复选框即可 (click)
event) (click)
事件为1次) I updated your plunker with a working example 我用一个可行的例子更新了您的朋克
http://plnkr.co/edit/y8qAbkBljG1TbVu5TKMX?p=preview http://plnkr.co/edit/y8qAbkBljG1TbVu5TKMX?p=preview
.html .html
<input type="radio" name="radioOption" [(ngModel)]="option" id="radio1" value="1"/>
<input type="radio" name="radioOption" [(ngModel)]="option" id="radio2" value="2" />
.ts .ts
export class PaymentMethodComponent implements OnInit {
option: string;
constructor() {
this.option= '1'
}
}
You need to set the value for variable ie option = 1
then your checkbox / radio button will be checked by default based on provided value. 您需要设置变量的值,即
option = 1
然后默认情况下将根据提供的值选中您的复选框/单选按钮。
Note: Make sure to group the radio buttons, keep name same as grouping is done by name. 注意:确保对单选按钮进行分组,保持名称与按名称分组相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.