Как сохранить данные из нескольких форм на кнопке, нажмите Функцию? ⇐ Html

[Anonymous]

мне удалось создать несколько форм на основе значения из раскрывающегося списка, но я не могу сохранить данные из входного элемента в базу данных. Если в моем раскрывающемся списке отображается значение 5 , то будет показано 5 форм с тем же количеством входного элемента и будет готова к вводу данных. Моя проблема заключается в том, как сохранить эти данные из One или нескольких форм Textbox в базу данных.import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Offspring } from './animal';

@Injectable({
providedIn: 'root'
})
export class AnimalService {

readonly Urloffspring = 'api/AnimalAPI'
constructor(private http:HttpClient) { }

formOffspring:Offspring = new Offspring();
formSubmitted: boolean = false;

postOffspring(formOffspring: any){
console.log(formOffspring);
return this.http.post(this.Urloffspring, formOffspring);
}
}
< /code>
**moponent.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { AnimalService } from '../animal.service';
@Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
})

export class FetchDataComponent implements OnInit {
reactForm: FormGroup;
public forms: FormGroup[] = [];
public unitData: Object[] = [
{ Id: 'Form1', Form: '1' },
{ Id: 'Form2', Form: '2' },
{ Id: 'Form3', Form: '3' },
{ Id: 'Form4', Form: '4' },
{ Id: 'Form5', Form: '5' },
];
public val: string = "1";
public unitFields: Object = { text: 'Form', value: 'Form' };
public unitWaterMark: string = '';

ngOnInit(): void {
this.generateForms(1);
}

generateForms(count: number): void {
this.forms = [];
for (let i = 0; i < count; i++) {
this.forms.push(
this.fb.group({
Id: (0),
Animal: (null),
Tagno: (null),
})
)}
}

dropdownChange(args: any): void {
const selectedCount = parseInt(args.value, 10);
if (!isNaN(selectedCount)) {
this.generateForms(selectedCount);
}
}

onSubmit(): void {
if (this.forms.every(form => form.valid)) {
const allFormData = this.forms.map(form => form.value);
}

// ... validation code ...
this.service.postOffspring(this.forms).subscribe({
next: (response) => {
console.log('Forms saved successfully', response);
},
error: (error) => {
console.error('Error saving forms', error);
}
});
}

onSubmitAll() {
let allValid = true;
const allFormData = [];
this.forms.forEach((form, index) => {
if (form.valid) {
allFormData.push(form.value);
} else {
form.markAllAsTouched();
allValid = false;
}
});

if (allValid) {
// here can you get the all forms data and send it to backend using the angular service.
}
}
}

constructor(private fb: FormBuilder, private service: AnimalService ) {}
}

html








Customer {{ i + 1 }}











Animal






Tagno




 


Подробнее здесь: https://stackoverflow.com/questions/797 ... k-function