мне удалось создать несколько форм на основе значения из раскрывающегося списка, но я не могу сохранить данные из входного элемента в базу данных. Если в моем раскрывающемся списке отображается значение 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
Backend
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Project1.Models;
using System.Data.SqlClient;
using System.Data;
using Microsoft.Extensions.Configuration;
namespace Project1.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class AnimalAPIController : ControllerBase
{
private dbContext _context;
public AnimalAPIController(dbContext context, IConfiguration configuration)
{
_context = context;
}
[HttpPost]
public void Post([FromBody] Animaldb book)
{
_context.Animaldb.Add(book);
_context.SaveChanges();
}
}
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... k-function
