Angular 能够动态添加和删除表格中的行
我正在angular 7中创建一个反应式表单，能够动态添加和删除表中的行 我需要的是 我需要在用户单击add按钮后将这些控件中输入的值添加到表中 表格行应包含这些值以及最后一列中的“删除”按钮 如何使用反应式表单实现这一点 目前我的UI看起来像这样Angular 能够动态添加和删除表格中的行,angular,Angular,我正在angular 7中创建一个反应式表单，能够动态添加和删除表中的行 我需要的是 我需要在用户单击add按钮后将这些控件中输入的值添加到表中 表格行应包含这些值以及最后一列中的“删除”按钮 如何使用反应式表单实现这一点 目前我的UI看起来像这样 <form [formGroup]="frmFirm" (ngSubmit)="onSubmit()"> <div *ngIf="FirmDetails && FirmDetails.Firm" c
<form [formGroup]="frmFirm" (ngSubmit)="onSubmit()">
<div *ngIf="FirmDetails && FirmDetails.Firm" class="card-body scrollClass" style="width:100%">
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Websites}}</div>
</div>
</div>
</div>
</form>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
<div class="col-md-3">
<!-- <div *ngIf="!EditMode">{{FirmDetails.Websites[0].WEBSITE_URL}}</div> -->
<!-- <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
/> -->
<div formArrayName="websites"
*ngFor="let item of frmFirm.get('websites').controls; let i = index; let last = last">
<div [formGroupName]="i">
<input formControlName="websiteUrl" placeholder="Website Url">
<input formControlName="username" placeholder="User Name">
<input formControlName="password" placeholder="Password">
<button (click)="removeWebsite()">Remove Website</button>
<button (click)="addWebsite()" *ngIf="last">Add Website</button>
</div>
</div>
</div>
</div>
网站
删除网站
添加网站
import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild, Input } from '@angular/core';
import { OnInit } from '@angular/core';
import { FirmService } from '../services/firm.service';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CommonDataService} from '../services/common.data.service';
import {FormGroup, FormControl, FormBuilder, FormArray} from '@angular/forms';
@Component({
selector: 'mgr-firm',
templateUrl: './firm.component.html'
})
export class FirmComponent implements OnInit {
private Error: string;
public FirmDetails: any;
public EditMode: boolean;
public Editor = ClassicEditor;
public EditorConfig : string;
public events: string[] = [];
@Input() FirmId: number;
DateFoundedDate: Date;
public frmFirm: FormGroup;
constructor( private _fb: FormBuilder, private firmService: FirmService, private commonDataService: CommonDataService) {
}
ngOnInit() {
this.getFirmDetails();
this.initializeFormModel();
}
initializeFormModel() {
this.frmFirm = this._fb.group({
firmName: [''],
shortName: [''],
alternateName: [''],
dateFounded: [''],
firmHistory: [''],
People: [''],
websites: this._fb.array([
this.createWebsite()
])
});
}
// public addWebsite(): void {
// const websites = this.frmFirm.get('websites') as FormArray;
// websites.push(this._fb.control(''));
// }
public addWebsite(): void {
this.websites.push(this.createWebsite());
}
public removeWebsite(index: number): void {
const websites = this.frmFirm.get('websites') as FormArray;
websites.removeAt(index);
}
private createWebsite(): FormGroup {
return this._fb.group({
websiteUrl: [''],
username: [''],
password: ['']
});
}
get websites(): FormArray {
return <FormArray>this.frmFirm.get('websites');
}
setFormValues(FirmDetails: any) {
this.frmFirm.patchValue({
firmName: FirmDetails.Firm.NAME,
shortName: FirmDetails.Firm.SHORT_NAME,
alternateName: FirmDetails.Firm.ALTERNATE_NAME,
dateFounded: FirmDetails.Firm.DATE_FOUNDED,
firmHistory: FirmDetails.Firm.HISTORY_HTML,
People: FirmDetails.People
});
const websiteGroup = this._fb.group({
websiteUrl: FirmDetails.Websites[0].WEBSITE_URL,
username: FirmDetails.Websites[0].USERNAME,
password: FirmDetails.Websites[0].PASSWORD
});
this.frmFirm.setControl('websites', this._fb.array([websiteGroup]));
}
getFirmDetails() {
if (this.FirmId != null) {
this.firmService.getFirmDetails(this.FirmId)
.subscribe(data => {
this.FirmDetails = data;
this.setFormValues(this.FirmDetails);
},
err => {
this.Error = 'An error has occurred. Please contact BSG';
},
() => {
});
}
}
get dateFoundedDate(): Date {
var dateString = this.FirmDetails.Firm.DATE_FOUNDED;
var seconds = parseInt(dateString.replace(/\/Date\(([0-9]+)[^+]\//i, "$1"));
var date = new Date(seconds);
return date;
}
saveManager() {
this.firmService.createFirm(this.FirmDetails)
.subscribe(data => {
this.getFirmDetails();
this.EditMode = !this.EditMode;
},
err => {
this.Error = 'An error has occurred. Please contact BSG';
},
() => {
});
}
dateFoundedChanged(dateFoundedDate: Date) {
this.DateFoundedDate = dateFoundedDate;
}
}
import{Component，Injectable，NgZone，viewenclosuration，ViewChild，Input}来自'@angular/core'；
从“@angular/core”导入{OnInit}；
从“../services/firm.service”导入{FirmService}；
从“@ckeditor/ckeditor5 build classic”导入*作为ClassicEditor；
从“../services/common.data.service”导入{CommonDataService}；
从'@angular/forms'导入{FormGroup，FormControl，FormBuilder，FormArray}；
@组成部分({
选择器：'公司经理'，
templateUrl:“./firm.component.html”
})
导出类FirmComponent实现OnInit{
私有错误：字符串；
公开资料：任何；
公共编辑模式：布尔；
公共编辑器=ClassicEditor；
公共编辑器配置：字符串；
公共事件：字符串[]=[]；
@Input（）FirmId：数字；
DateFoundedDate：日期；
公共财务公司：FormGroup；
构造函数（private-fb:FormBuilder，private-firmService:firmService，private-commonDataService:commonDataService）{
}
恩戈尼尼特（）{
此参数为.getFirmDetails（）；
这是.initializeFormModel（）；
}
initializeFormModel（）{
this.frmFirm=this.\u fb.group({
公司名称：['']，
短名称：['']，
备选名称：['']，
成立日期：['']，
公司历史：['']，
人：['']，
网站：这个([
this.createWebsite（）
])
});
}
//public addWebsite（）：void{
//const websites=this.frmFirm.get（'websites'）作为FormArray；
//推送（这个控制（“”））；
// }
public addWebsite（）：void{
this.websites.push（this.createWebsite（））；
}
public RemoveWeb（索引：编号）：无效{
const websites=this.frmFirm.get（'websites'）作为FormArray；
网站。removeAt（索引）；
}
私有createWebsite（）：FormGroup{
将此返回。\u fb.group({
网站URL:['']，
用户名：['']，
密码：['']
});
}
获取网站（）：FormArray{
返回此.frmFirm.get（'websites'）；
}
setFormValues（FirmDetails:any）{
this.frmFirm.patchValue({
firmName:FirmDetails.Firm.NAME，
shortName:FirmDetails.Firm.SHORT\u NAME，
alternateName:FirmDetails.Firm.ALTERNATE\u名称，
成立日期：FirmDetails.Firm.DATE\u成立日期，
firmHistory:FirmDetails.Firm.HISTORY\u HTML，
人物：细节，人物
});
const websiteGroup=this.\u fb.group({
网站URL:FirmDetails.Websites[0]。网站URL，
用户名：FirmDetails.Websites[0]。用户名，
密码：FirmDetails.Websites[0]。密码
});
this.frmFirm.setControl（'websites'，this.fb.array（[websiteGroup]）；
}
getFirmDetails（）{
如果（this.FirmId！=null）{
this.firmService.getFirmDetails（this.FirmId）
.订阅（数据=>{
this.FirmDetails=数据；
this.setFormValues（this.FirmDetails）；
},
错误=>{
this.Error='发生错误。请联系BSG'；
},
() => {
});
}
}
get-dateFoundedDate（）：日期{
var dateString=this.FirmDetails.Firm.DATE\u；
var seconds=parseInt（dateString.replace（/\/Date\（[0-9]+）[^+]\//i，“$1”）；
var日期=新日期（秒）；
返回日期；
}
saveManager（）{
this.firmService.createFirm（this.FirmDetails）
.订阅（数据=>{
此参数为.getFirmDetails（）；
this.EditMode=！this.EditMode；
},
错误=>{
this.Error='发生错误。请联系BSG'；
},
() => {
});
}
dateFoundedChanged（dateFoundedDate:Date）{
this.DateFoundedDate=DateFoundedDate；
}
}
FormArray<div formArrayName="companies"
*ngFor="let item of form.get('companies').controls; let i = index; let last = last">
<div [formGroupName]="i">
<input formControlName="firmName" placeholder="Firm name">
<input formControlName="shortName" placeholder="Short name">
<input formControlName="alternateName" placeholder="Alternate name">
<input formControlName="dateFounded" placeholder="Founded">
<input formControlName="firmHistory" placeholder="History">
<input formControlName="People" placeholder="People">
<button (click)="removeCompany()">Remove company</button>
<button (click)="addCompany()" *ngIf="last">Add company</button>
</div>
</div>
我有一些类似的东西，但我将它们添加为“块”而不是“行”。单击“添加另一个地址”按钮添加另一个块 我确信格式只是对布局进行一些修改的问题 更具挑战性的部分是代码。要获得可重复的字段集，需要使用FormArray，其中每个元素都是自己的FormGroup 我这里有一个完整的例子：
好吧，前面的答案让我无法回答……但是我留下了这个链接，链接提供了一个完整的工作示例。谢谢Bruno，我现在可以添加控件，但不确定在第一次加载表单时如何绑定控件。我
<div formArrayName="companies"
*ngFor="let item of form.get('companies').controls; let i = index; let last = last">
<div [formGroupName]="i">
<input formControlName="firmName" placeholder="Firm name">
<input formControlName="shortName" placeholder="Short name">
<input formControlName="alternateName" placeholder="Alternate name">
<input formControlName="dateFounded" placeholder="Founded">
<input formControlName="firmHistory" placeholder="History">
<input formControlName="People" placeholder="People">
<button (click)="removeCompany()">Remove company</button>
<button (click)="addCompany()" *ngIf="last">Add company</button>
</div>
</div>
...
public form: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.form = this.formBuilder.group({
companies: this.formBuilder.array([ this.createCompany() ])
});
}
public addCompany(): void {
const companies = this.form.get('companies') as FormArray;
companies.push(this.createItem());
}
public removeCompany(index: number): void {
const companies = this.form.get('companies') as FormArray;
companies.removeAt(index);
}
private createCompany(): FormGroup {
return this.formBuilder.group({
firmName: [''],
shortName: [''],
alternateName: [''],
dateFounded: [''],
firmHistory: [''],
People: [''],
});
}
...