如何在 angular 4/6/7 中传递表单提交中所有选中的复选框值
How to pass all checked checkbox values on Form Submit in angular 4/6/7
我想在不使用 change()
或 click()
函数的情况下获取组件中表单的所有选中项目,因为它无法获取已选中的项目。
这是我在 TS 中的数组:
PartyRoles = [
{
Id: 1,
Name: "Vendor",
Checked: true
},
{
Id: 2,
Name: "Client",
Checked: true
},
{
Id: 3,
Name: "Consigner",
Checked: false
}
]
我的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>
我想在其中获取所有选中值的 onSubmit 函数:
editPartyRolesSubmit= function () {
// Please suggest how to fetch checked items
}
您可以为所选项目创建一个单独的数组
let SelectedList=[]
for(let i=0;i<PartyRoles.length;i++){
if(PartyRoles[i].checked){
SelectedList.push(PartyRoles[i]);
}
}
将您的 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>
您的 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);
}
您不必在方法中使用 function
关键字。这是一个 link 到 working demo.
您可以使用 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>
函数可以
editPartyRolesSubmit() {
console.log(this.PartyRoles);
}
你可以使用这个:
<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>
或者:
<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>
另一种方式,
在你的 html
<li *ngFor="let course of courses.ugreg">
<mat-checkbox [checked]="course.checked" [(ngModel)]="course.checked" name="course.name">
{{course.name}}
</mat-checkbox>
</li>
在你的打字稿中
selectedcourses = [];
courses: Courses = {
name: 'Courses',
checked: false ,
ugreg: [
{ name: 'B Com(Computer)*',checked: false},
{ name: 'B Com(Marketing)*', checked: false},
{ name: 'BBA*', checked: false },
{ name: 'BCA**', checked: false }
],
};
并在您的表单提交按钮方法中
onSubmit() {
this.courses.ugreg.forEach(x => { if (x.checked) { this.selectedcourses.push(x.name); }
})
我想在不使用 change()
或 click()
函数的情况下获取组件中表单的所有选中项目,因为它无法获取已选中的项目。
这是我在 TS 中的数组:
PartyRoles = [
{
Id: 1,
Name: "Vendor",
Checked: true
},
{
Id: 2,
Name: "Client",
Checked: true
},
{
Id: 3,
Name: "Consigner",
Checked: false
}
]
我的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>
我想在其中获取所有选中值的 onSubmit 函数:
editPartyRolesSubmit= function () {
// Please suggest how to fetch checked items
}
您可以为所选项目创建一个单独的数组
let SelectedList=[]
for(let i=0;i<PartyRoles.length;i++){
if(PartyRoles[i].checked){
SelectedList.push(PartyRoles[i]);
}
}
将您的 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>
您的 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);
}
您不必在方法中使用 function
关键字。这是一个 link 到 working demo.
您可以使用 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>
函数可以
editPartyRolesSubmit() {
console.log(this.PartyRoles);
}
你可以使用这个:
<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>
或者:
<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>
另一种方式,
在你的 html
<li *ngFor="let course of courses.ugreg">
<mat-checkbox [checked]="course.checked" [(ngModel)]="course.checked" name="course.name">
{{course.name}}
</mat-checkbox>
</li>
在你的打字稿中
selectedcourses = [];
courses: Courses = {
name: 'Courses',
checked: false ,
ugreg: [
{ name: 'B Com(Computer)*',checked: false},
{ name: 'B Com(Marketing)*', checked: false},
{ name: 'BBA*', checked: false },
{ name: 'BCA**', checked: false }
],
};
并在您的表单提交按钮方法中
onSubmit() {
this.courses.ugreg.forEach(x => { if (x.checked) { this.selectedcourses.push(x.name); }
})