如何将所选复选框的值作为数组发送到函数?

问题描述 投票:1回答:4

我是一个相当新的角度工作,并想知道是否有一个简单的方法来首先检查是否选中了复选框。如果选中它,我想将它传递给saveOptions函数。如果选择了多个,我想将它们全部传递并保存到一组选项中。有人可以帮我吗?提前致谢!

import { Component } from '@angular/core';
import { forEach } from '@angular/router/src/utils/collection';
import { Options } from 'selenium-webdriver/ie';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options: any = []



  saveOptions(x:any[]){
     x.forEach(element => {
      this.options.push(element);
    });
  }

} 
<ul class="option-row">
    <div class="option-group">
        <li><input type="checkbox"  id="option-1" value="1" required> <label for="option-1">Option 1</label></li>
        <li><input type="checkbox"  id="option-2" value="2" required> <label for="option-2">Option 2</label></li>
        <li><input type="checkbox"  id="option-3" value="3" required> <label for="option-3">Option 3</label></li>
    </div>
    <!--Want to know how to check if the checkbox is selected and pass the selected options to the method-->
    <button type="button" (click)="saveOptions();">Submit</button>
</ul>
html angular typescript
4个回答
2
投票

一种方法是订阅表单的valueChanges,如下所示:

export class AppComponent implements OnInit {
  options: any = []
  model = { optionOne: false, optionTwo: false, optionThree: false }
  formChangesSubscription;
  @ViewChild('form') ngForm: NgForm;

  ngOnInit() {
    this.formChangesSubscription = this.ngForm.form.valueChanges.subscribe(x => {
      console.log(x);
    })
  }

  saveOptions(x: any[]) {
    x.forEach(element => {
      this.options.push(element);
    });
  }
} 
<form #form="ngForm">
    <ul class="option-row">
        <div class="option-group">
            <li><input type="checkbox" [(ngModel)]="model.optionOne" name="optionOne" id="option-1" value="1" required> <label for="option-1">Option 1</label></li>
      <li><input type="checkbox" [(ngModel)]="model.optionTwo" name="optionTwo" id="option-2" value="2" required> <label for="option-2">Option 2</label></li>
      <li><input type="checkbox" [(ngModel)]="model.optionThree" name="optionThree" id="option-3" value="3" required> <label for="option-3">Option 3</label></li>
    </div>
    <!--Want to know how to check if the checkbox is selected and pass the selected options to the method-->
    <button type="button" (click)="saveOptions();">Submit</button>
</ul>
</form>

https://stackblitz.com/edit/angular-j5idkn?file=src%2Fapp%2Fapp.component.ts


1
投票

我只想在这里扩展ganesh的答案!

Component.html

<form #form="ngForm">
     <ul class="option-row">
    <div *ngFor="let li of listedValue; index as i" class="option-group">
        <li><input type="checkbox"  id="option-{{li}}" [value]="l" required (click)="setCheckbox(li, i)"> <label for="option-{{li}}">Option {{ i }}</label></li>
    </div>
        button type="button" (click)="saveOptions();">Submit</button>
</ul>
</form>

component.ts

name = 'Angular 5';
  listedValue: any = [0, 1, 2];
  options: any = []

  ngOnInit(){}

  setCheckbox(event: any, index: number) {
    if(!this.options.includes(event)){
      this.options = [...this.options, event];
    }else {
      this.options = this.options.filter((item) => item !== event);
    }
  }

  saveOptions() {
   console.log(this.options);
  }

StackBlitz


1
投票

你可以在ngFor[value] div元素的帮助下以动态方式进行。

使用数组为您的li元素,修改您的模板和组件如下所示。

Component.html

 <ul class="option-row">
    <div *ngFor="let li of listedValue" class="option-group">
        <li><input type="checkbox"  id="option-{{li}}" [value]="l" required (click)="setCheckbox(li)"> <label for="option-{{li}}">Option 1</label></li>
    </div>
        <!--Want to know how to check if the checkbox is selected and pass the selected options to the method-->
        <button type="button" (click)="saveOptions();">Submit</button>
</ul>

Component.ts

name = 'Angular 5';
  listedValue: any = [1, 2, 3];
  options: any = []

  setCheckbox(event: any,value: any) {
     if (event.target.checked)
       this.options.push(value)
     else
       this.options= this.options.filter(val => val != value);
  }

  saveOptions() {
   console.log(this.options);
  }

我为你的案子创建了一个stackblitz检查一次。我希望这能解决你的问题:)


0
投票

我认为你可以使用表格控制反应形式,它会帮助你

© www.soinside.com 2019 - 2024. All rights reserved.