0

我有以下角度组件 ts 能够将动态字段添加到表单：

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {Buildcompany} from "../../models/buildcompany.model";
import {BuildcompanyService} from "../../services/buildcompany.service";
import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms'

@Component({
  selector: 'app-add-buildcompany',
  templateUrl: './add-buildcompany.component.html',
  styleUrls: ['./add-buildcompany.component.css'],

})
export class AddBuildcompanyComponent implements OnInit {


  buildcompany: Buildcompany={
    shortname:'',
    fullname:'',
    address:'',
    telephone:'',
    website:'',
    sociallinks:'',
    foundationyear:''
  }
  submitted=false;
  @ViewChild('network', {static: true}) networkElement: ElementRef;
 netw?: [];

  constructor(private  buildcompanyService:BuildcompanyService,networkElement: ElementRef) {
    this.networkElement=networkElement;


  }



  ngOnInit(): void {
  }

  add(){
    let row = document.createElement('div');
    row.className = 'row';
    row.innerHTML = `
      <br>
      <input type="text" id="netw" name="network[]" #network class="form-control netw">"`;
    let row2 = document.createElement('div');

    row2.innerHTML = `
      <br>
      <input type="text" name="links[]" class="form-control">"`;

    // @ts-ignore
    document.querySelector('.showInputField').appendChild(row);
    // @ts-ignore

    document.querySelector('.showInputField').appendChild(row2);

  }
  saveBuildcompany(): void {
    // @ts-ignore

    this.netw = (<HTMLInputElement>document.getElementsByClassName("netw")).value;

    // @ts-ignore
    console.log(this.netw[0].value);
    const data = {
      shortname: this.buildcompany.shortname,
      fullname: this.buildcompany.fullname,
      address: this.buildcompany.address,
      telephone: this.buildcompany.telephone,
      website: this.buildcompany.website,
      sociallinks: this.buildcompany.sociallinks,
      foundationyear: this.buildcompany.foundationyear

    };
    this.buildcompanyService.create(data)
      .subscribe({
        next: (res) => {
          console.log(res);
          this.submitted = true;
        },
        error: (e) => console.error(e)
      });
  }
  newBuildcompany(): void {
    this.submitted = false;
    this.buildcompany = {
      shortname: '',
      fullname:'',
      address:'',
      telephone:'',
      website:'',
      foundationyear:''

    };
  }
}

将这些动态添加的字段的值放入 save() 函数的数组中是否可行？我可以在控制台中看到它们实际上已显示。该类称为网络。或者这个任务的最佳方法是什么？

更新我尝试添加一个表单组并收到以下错误

Error: 
    ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
    formGroup's partner directive "formControlName" instead.  Example:
4

0 回答 0