javascript - Angular 4 : How do I build a dynamic list of checkboxes to submit in a form?

Question

我正在开发一个应用程序，在其中动态构建要提交到 REST API 的项目列表。我的计划是让表单生成复选框输入列表，以让用户选择要提交的各个元素，然后当他们点击提交时，仅发送那些选定的项目。

但我找不到接近我想要做的事情的例子。

这是我的组件类:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, FormArray, Validators, AbstractControl} from '@angular/forms';

import {File} from '../File';
import {ComicService} from '../comic.service';

@Component({
  selector: 'app-import-comics',
  templateUrl: './import-comics.component.html',
  styleUrls: ['./import-comics.component.css']
})
export class ImportComicsComponent implements OnInit {

  directoryForm: FormGroup;
  directory: AbstractControl;
  files: File[];

  constructor(private comicService: ComicService,
    builder: FormBuilder) {
    this.directoryForm = builder.group({'directory': ['', Validators.required]});
    this.directory = this.directoryForm.controls['directory'];
    this.files = [];
    this.selectedFiles = [];
  }

  ngOnInit() {
  }

  onLoad(directory: string): void {
    console.log('Attempt to get a list of comes from:', directory);
    this.comicService.getFilesUnder(directory).subscribe(
      files => {
        this.files = files;
      },
      err => {
        console.log(err);
      }
    );
  }

  toggleSelected(file: File): void {
    file.selected = !file.selected;
  }

  onImportFiles(): void {
    console.log('Attempting to import filenames:', this.selectedFiles);
  }

}

这是表格:

<div class="ui raised segment">
    <h2 class="ui header">Import Comics</h2>
    <form #f="ngForm" (ngSubmit)="onLoad(directory.value)" class="ui form">
        <div class="field">
            <label for="directory">Root directory:</label> <input type="text"
                id="directory" placeholder="Root Directory"
                [formControl]="directoryForm.controls['directory']">
        </div>

        <button type="submit" class="ui button">Load</button>
    </form>

    <div *ngIf="this.files.length != 0">
        <form (ngSubmit)="onImportFiles(filenames)" class="ui form">
            <table class="ui celled table">
                <thead>
                    <tr>
                        <th></th>
                        <th>Filename</th>
                        <th>Size</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let file of this.files">
                        <!-- How do I get the checkbox to add a filename to be submitted with the form? -->
                        <td><input type="checkbox"></td>
                        <td>{{file.filename}}</td>
                        <td>{{file.size}}</td>
                    </tr>
                </tbody>
            </table>
            <button type="submit" class="ui button">Import</button>
        </form>
    </div>
</div>

Answer 1

您需要触发toggleSelected当复选框被选中/取消选中(更改)时函数，并通过查看 selected 填充所选文件的列表。文件位于 files数组在你的 onImportFiles功能。

组件:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, FormArray, Validators, AbstractControl} from '@angular/forms';

import {File} from '../File';
import {ComicService} from '../comic.service';

@Component({
  selector: 'app-import-comics',
  templateUrl: './import-comics.component.html',
  styleUrls: ['./import-comics.component.css']
})
export class ImportComicsComponent implements OnInit {

  directoryForm: FormGroup;
  directory: AbstractControl;
  files: File[];

  constructor(private comicService: ComicService,
    builder: FormBuilder) {
    this.directoryForm = builder.group({'directory': ['', Validators.required]});
    this.directory = this.directoryForm.controls['directory'];
    this.files = [];
    this.selectedFiles = [];
  }

  ngOnInit() {
  }

  onLoad(directory: string): void {
    console.log('Attempt to get a list of comes from:', directory);
    this.comicService.getFilesUnder(directory).subscribe(
      files => {
        this.files = files;
      },
      err => {
        console.log(err);
      }
    );
  }

  toggleSelected(file: File): void {
    file.selected = !file.selected;
  }

  onImportFiles(): void {
    this.selectedFiles = this.files.filter(file => file.selected).map(file => file.filename);
    console.log('Attempting to import filenames:', this.selectedFiles);
    // TODO: your file importing code here
  }

}

HTML:

<div class="ui raised segment">
    <h2 class="ui header">Import Comics</h2>
    <form #f="ngForm" (ngSubmit)="onLoad(directory.value)" class="ui form">
        <div class="field">
            <label for="directory">Root directory:</label> <input type="text"
                id="directory" placeholder="Root Directory"
                [formControl]="directoryForm.controls['directory']">
        </div>

        <button type="submit" class="ui button">Load</button>
    </form>

    <div *ngIf="this.files.length != 0">
        <form (ngSubmit)="onImportFiles(filenames)" class="ui form">
            <table class="ui celled table">
                <thead>
                    <tr>
                        <th></th>
                        <th>Filename</th>
                        <th>Size</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let file of this.files">
                        <!-- How do I get the checkbox to add a filename to be submitted with the form? -->
                        <td><input type="checkbox" (change)="toggleSelected(file)"></td>
                        <td>{{file.filename}}</td>
                        <td>{{file.size}}</td>
                    </tr>
                </tbody>
            </table>
            <button type="submit" class="ui button">Import</button>
        </form>
    </div>
</div>