get input values by there class - html

Question

I have a following angular component ts with an ability to add dynamic fields to a form:
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:''
};
}
}
Is that posible at all to get values of those dynamicly added fields into an array on save() function? I can see in a console that they are actually shown. The class is called netw. Or what is the best approche to this task?
UPDATE
I tryed to add a formgroup and got the following error
Error:
ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead. Example: