如何以角度 4/6/7 在表单提交上传递所有选中的复选框值

Posted 2023-03-13

【中文标题】如何以角度 4/6/7 在表单提交上传递所有选中的复选框值

【英文标题】：How to pass all checked checkbox values on Form Submit in angular 4/6/7

【发布时间】：2018-02-09 01:26:20

【问题描述】：

我想在不使用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
  

【参考方案1】：

另一种方式，

在你的 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);  
 )

【参考方案2】：

您可以为选定的项目创建一个单独的数组

let SelectedList=[]
for(let i=0;i<PartyRoles.length;i++)
 if(PartyRoles[i].checked)
  SelectedList.push(PartyRoles[i]);
 

【参考方案3】：

你可以用这个：

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

【参考方案4】：

将您的 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 关键字。这是working demo的链接。

【参考方案5】：

你可以使用 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);