typescript 如何在 4/6/7 角度传递表单提交上所有选中的复选框值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45975524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass all checked checkbox values on Form Submit in angular 4/6/7
提问by Adrita Sharma
I want to fetch all checked items of a form in component without using change()or click()function as it is unable to fetch already checked items.
我想在不使用change()或click()函数的情况下获取组件中表单的所有选中项，因为它无法获取已选中的项。
Here is my Array in TS:
这是我在 TS 中的数组：
PartyRoles = [
{
Id: 1,
Name: "Vendor",
Checked: true
},
{
Id: 2,
Name: "Client",
Checked: true
},
{
Id: 3,
Name: "Consigner",
Checked: false
}
]
My HTML Form:
我的 HTML 表单：
<form (ngSubmit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
</form>
My onSubmit function in which I want to get all the checked values:
我的 onSubmit 函数，我想在其中获取所有选中的值：
editPartyRolesSubmit= function () {
// Please suggest how to fetch checked items
}
采纳答案by Eswar
You could use Form and NgModel
你可以使用 Form 和 NgModel
<form #checkboxForm="ngForm" (submit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
<input type="submit" value="Submit">
</form>
function can be
功能可以是
editPartyRolesSubmit() {
console.log(this.PartyRoles);
}
回答by Aman Jain
You can use this:
你可以使用这个：
<form (ngSubmit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles; let i = index">
<label>
<input type="checkbox"
[attr.checked]="item.Checked == true ? true : null"
(change)="item.Checked = !item.Checked"
[attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
<button type="submit">Click</button>
</form>
Or:
或者：
<form (submit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
<button type="submit">Click</button>
</form>
回答by Faisal
Change your Html to following :
将您的 Html 更改为以下内容：
<form (ngSubmit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}"
[checked]="item.Checked"
(change)="item.Checked = !item.Checked"
[attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
</form>
Your PartyRoleswill remain updated with latest checkbox values. You can access it like this as an example:
您PartyRoles将使用最新的复选框值保持更新。您可以像这样访问它作为示例：
editPartyRolesSubmit(){
// Access each item like this in PartyRoles
this.PartyRoles.forEach(role=>{
console.log('Id: ' + role.Id + ', Name: ' + role.Name + ', Checked: ' + role.Checked);
});
// Or like this
let role = this.PartyRoles.find(x=>x.Id === 1);
if(role !== undefined){
console.log(role);
}
// Or a filetered list
let checkedRoles = this.PartyRoles.filter(x=>x.Checked === true);
console.log(checkedRoles);
// Or by array index
let roleTwo = this.PartyRoles[2];
console.log(roleTwo);
}
You dont have to use the functionkeyword with you method. Here is a link to working demo.
您不必在方法中使用function关键字。这是工作演示的链接。
回答by Ashish Bisht
You can create a separate array for selected Items
您可以为选定的项目创建一个单独的数组
let SelectedList=[]
for(let i=0;i<PartyRoles.length;i++){
if(PartyRoles[i].checked){
SelectedList.push(PartyRoles[i]);
}
}
