我想为每个tax_rate_details数组添加一个for循环到Angular表单，以便表单文本框自动填充数据值。我想为每个tax_rate_details 数组添加NewRow。我应该在 HTML 或 TypeScript 文件中进行哪些更改才能实现此目的？
import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import { ActivatedRoute, Router } from '@angular/router';
import { TaxRateService, TaxService } from 'src/app/app.service';
import { Country, Tax } from 'src/app/Tax';
@Component({
selector: 'app-update-tax-rate',
templateUrl: './update-tax-rate.component.html',
styleUrls: ['./update-tax-rate.component.css']
})
export class UpdateTaxRateComponent {
data: any;
taxrate: any;
TaxAuthorityList: any;
TaxRateList: any;
TaxRateForm: FormGroup;
constructor(private taxRateService: TaxRateService, private taxService: TaxService, private route: ActivatedRoute, private router: Router, private formBuilder: FormBuilder) {
this.TaxRateForm = this.formBuilder.group({
tax_rate_name: ['', [Validators.required]],
tax_authority_ref_id: [''],
tax_type_ref_id: [''],
is_active: [true],
tax_rate_details: this.formBuilder.array([this.tax_rate_details()])
});
}
ngOnInit(): void {
let pk = this.route.snapshot.params['pk'];
this.taxRateService.getTaxRate(pk).subscribe(data => {
this.taxrate = data
console.log(this.taxrate)
this.populateForm();
})
this.refreshList();
}
refreshList() {
this.taxService.getTaxes().subscribe((data) => {
// console.log(data);
this.TaxAuthorityList = data;
this.TaxAuthorityList.forEach((tax: Tax) => {
// console.log(tax.pk, tax.name);
});
});
}
get formDetails() {
return this.TaxRateForm.get('tax_rate_details') as FormArray;
}
addNewRow() {
this.formDetails.push(this.tax_rate_details());
}
deleteRow(index: number) {
if (index == 0) {
return false;
} else {
this.formDetails.removeAt(index);
return true;
}
}
tax_rate_details() {
return this.formBuilder.group({
hsn_sac_no: ['', [Validators.required]],
description: [''],
from_date: [''],
to_date: [''],
tax_rate: [''],
rcm_flag: [true],
cess: [''],
});
}
populateForm(): void {
this.TaxRateForm.patchValue({
tax_rate_name: this.taxrate.tax_rate_name,
tax_authority_ref_id: this.taxrate.tax_authority_ref_id,
tax_type_ref_id: this.taxrate.tax_type_ref_id,
is_active:this.taxrate.is_active,
tax_rate_details: this.formBuilder.array([this.tax_rate_details()])
});
}
submit() {
this.data = this.TaxRateForm.value
this.taxrate.tax_rate_name = this.data.tax_rate_name
this.taxrate.tax_authority_ref_id = this.data.tax_authority_ref_id
this.taxrate.is_active = this.data.is_active
this.taxrate.tax_rate_details= this.formBuilder.array([this.tax_rate_details()])
// console.log(this.data)
this.taxRateService.updateTaxRate(this.taxrate?.pk, this.taxrate).subscribe(data => {
// console.log(data)
})
this.router.navigate(['/']);
}
public useDefault1 = false;
public toggle1(event: MatSlideToggleChange) {
console.log('toggle', event.checked);
this.useDefault1 = event.checked;
this.TaxRateForm.patchValue({
is_active: event.checked ? true : false,
});
}
public useDefault2 = false;
public toggle2(event: MatSlideToggleChange) {
console.log('toggle', event.checked);
this.useDefault2 = event.checked;
this.tax_rate_details().patchValue({
rcm_flag: event.checked ? true : false
});
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Tax Rate</title>
</head>
<body>
<!--Navbar consists only Home and Add Tax-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Welcome</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" routerLink="/">Home</a>
<a class="nav-link" routerLink="/add">Add Tax Rate</a>
</div>
</div>
</div>
</nav>
<!-- Form -->
<div class="my-5">
<div class="mx-5 mr-5">
<div class="container d-flex justify-content-between">
<h2 class="text-left d-inline" id="tax_authority">Tax Rate</h2>
<button class="btn btn-primary d-inline" routerLink="/viewtaxrate"><i class="fa-solid fa-calendar"></i> List of Tax
Authority</button>
</div>
<form [formGroup]="TaxRateForm" (ngSubmit)="submit()" class="mx-5 mr-5 my-5">
<!--Tax Rate Name-->
<div class="row">
<div class="col form-group">
<label for="tax_rate_name" class="form-label required" id="tax_rate_name">Tax rate name</label>
<input formControlName="tax_rate_name" value={{taxrate?.tax_rate_name}} type="text" name="tax_rate_name" class="form-control" placeholder="Tax Rate Name">
</div>
<!-- Tax Authority -->
<div class="col form-group">
<label for="tax_authority_ref_id" class="form-label required">Tax authority</label>
<select class="form-select" data-style="btn-primary" formControlName="tax_authority_ref_id" name="tax_authority_ref_id" id="tax_authority_ref_id">
<option [value]="taxauthority.pk" *ngFor="let taxauthority of TaxAuthorityList">
{{taxauthority.name}}</option>
</select>
</div>
<!-- Tax Type -->
<div class="col form-group">
<label for="tax_type_ref_id" class="form-label required">Tax type</label>
<select class="form-select" value={{taxrate?.tax_authority_ref_id}} data-style="btn-primary" formControlName="tax_type_ref_id" name="tax_type_ref_id" id="tax_type_ref_id">
<option value="GST">GST</option>
<option value="Income Tax">Income Tax</option>
</select>
</div>
</div>
<div class="row my-5">
<!--Status-->
<div class="col form-group">
<label for="is_active" class="row form-label" id="is_active_label">Status</label>
<div class="col">
<label class="form-check-label" for="is_active" id="active">Inactive</label>
<mat-slide-toggle [checked]="TaxRateForm.get('is_active')!.value" (change)="toggle1($event)" id="mat-slider"></mat-slide-toggle>
<label class="form-check-label" for="is_active" id="inactive">Active</label>
</div>
</div>
</div>
<div class="col my-3" formArrayName="tax_rate_details">
<h2 class="define_tax_rate_details">Define Tax Rate Details</h2>
<table class="table table-bordered my-3">
<thead class="smaller-font">
<tr>
<th scope="col">Action</th>
<th scope="col">Hsn sac no</th>
<th scope="col">Description</th>
<th scope="col">From date</th>
<th scope="col">To date</th>
<th scope="col">Tax Rate</th>
<th scope="col">RCM flag</th>
<th scope="col">Cess</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dynamic of formDetails.controls; let i=index" [formGroupName]="i">
<td>
<div class="my-3">
<button type="button" class="btn btn-default btn-lg" *ngIf="i==0" (click)="addNewRow()"><i class="fa-solid fa-square-plus" style="color: #b95bf2;"></i></button>
<button type="button" class="btn btn-default btn-lg" *ngIf="i>0"><i class="fa-solid fa-square-minus" style="color: #f11616;"></i></button>
</div>
</td>
<td>
<div class="col form-group my-4">
<input formControlName="hsn_sac_no" value={{taxrate?.tax_rate_details[i]?.hsn_sac_no}} type="text" name="hsn_sac_no" class="form-control form-control-sm" placeholder="Hsn sac no">
</div>
</td>
<td>
<div class="col form-group my-4">
<input formControlName="description" value={{taxrate?.tax_rate_details[i]?.description}} type="text" name="description" class="form-control form-control-sm" placeholder="description">
</div>
</td>
<td>
<div class="col form-group my-4">
<input formControlName="from_date" value={{taxrate?.tax_rate_details[i]?.from_date}} type="date" name="from_date" class="form-control form-control-sm" placeholder="From Date">
</div>
</td>
<td>
<div class="col form-group my-4">
<input formControlName="to_date" value={{taxrate?.tax_rate_details[i]?.to_date}} type="date" name="to_date" class="form-control form-control-sm" placeholder="To Date">
</div>
</td>
<td>
<div class="col form-group my-4">
<input formControlName="tax_rate" value={{taxrate?.tax_rate_details[i]?.tax_rate}} type="number" name="tax_rate" class="form-control form-control-sm" placeholder="Tax Rate">
</div>
</td>
<td>
<div class="col form-group my-4">
<label class="form-check-label form-control-sm" for="rcm_flag" id="active_tax_details">Inactive</label>
<!-- <mat-slide-toggle [checked]="taxRateDetailsForm.get('rcm_flag')!.value" (change)="toggle2($event)" class="smaller-slide-toggle" id="mat-slider"></mat-slide-toggle> -->
<!-- <mat-slide-toggle [checked]="group.get('rcm_flag')!.value" (change)="toggle2($event)" class="smaller-slide-toggle" id="mat-slider"></mat-slide-toggle> -->
<mat-slide-toggle formControlName="rcm_flag" (change)="toggle2($event)" class="smaller-slide-toggle" id="mat-slider"></mat-slide-toggle>
<label class="form-check-label" for="rcm_flag" id="inactive_tax_details">Active</label>
</div>
</td>
<td>
<div class="col form-group my-4">
<input formControlName="cess" value={{taxrate?.tax_rate_details[i]?.cess}} type="number" name="cess" class="form-control form-control-sm" placeholder="Cess">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col form-group d-flex justify-content-center my-3">
<input class="btn btn-primary" type="submit" value="Submit">
<input type="reset" class="btn btn-secondary mx-2 mr-2">
<button type="back" class="btn btn-danger" routerLink="/viewtaxrate">Back</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>我知道这是一个已经解决的老问题，但我已经为内联表格表单组件创建了一个节点包，该组件尽可能通用，以便将来遇到此问题的任何人都可以重用。 列标题及其验证器函数的映射作为输入传递，并且还可以选择将对象数组作为输入传递，其中列表中的每个对象将映射到表中的一行。
创建、更新和删除事件是从组件发出的，因此可以在您的角度应用程序中以您认为合适的方式做出反应。请随意检查一下。 https://www.npmjs.com/package/ng-table-form
使用以下命令安装软件包：
npm install ng-table-form