angular - 如何以 Angular 4/6/7 传递表单提交上的所有选中复选框值

Question

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

Answer 1

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