Question

我正在尝试制作一种反应形式，该形式从模拟数据（是数组）中获取数据。我想将它们显示为复选框，然后使用“提交”按钮将所选复选框的数据打印到控制台。在我当前的实现中，我能够在表单内显示数组，但不能使用“提交”按钮保存所选复选框的值。这是我的.ts文件：

lagsarlm

这是我的html文件：

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

import { MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { Project } from '@silexica/api.slx.cloud';
import { ADDRGETNETWORKPARAMS } from 'dns';



@Component({
  selector: 'valid-form',
  templateUrl: './new-simulation-configuration.component.html',
  styleUrls: ['./new-simulation-configuration.component.css']
})
export class NewSimulationConfigurationComponent implements OnInit {


  datas = DATAS;

  public hitCancel: boolean = false;


  myForm: FormGroup;
  items: FormArray = new FormArray([]);

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      configname: ['', [
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.-]+$')
      ]],
      description: ['', [
      ]],
      items: this.fb.array([this.createItem()])
    });
  }


  createItem(): FormGroup {
    return this.fb.group({
      name: '',
      model: '',
      checkbox: ' ',
    });
  }


  get configname() {
    return this.myForm.get('configname');
  }

  get description() {
    return this.myForm.get('description');
  }



  onSubmit() {

    this.myForm.value.items.forEach((item, index) => {
      if (item.checkbox) {
        item.name = this.datas[index].name;
        item.model = this.datas[index].model;
      }

    })

    console.warn(this.myForm.value);

  }
  cancel() {
    this.hitCancel = true;
  }

}

export const DATAS: Projects[] = [
  { name: 'Audio', model: 'Fast' },
  { name: 'Development ', model: 'Slow' },
  { name: 'Proto', model: 'Medium' },
];



export interface Projects {
  name: string;
  model: string;
}

还有，有没有办法在反应形式中将其显示为材料表？感谢您的帮助。

显示角反应形式内的项目清单

0 个答案: