Forms 角度2-一次发布/放置多个表格

我对每个客户项目都有一个重复的表单。重复表单显示客户的所有项目。例如，如果我有5个项目表单，我想编辑3个，添加2个，然后点击提交，发布/放置所有内容

问题是我如何做到这一点

表格HTML：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
<!--projects-->
<div formArrayName="projects">
    <div *ngFor="let project of myForm.controls.projects.controls; let i=index" class="panel panel-default">
        <div class="panel-heading">
            <span>Project {{i + 1}}</span>
            <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.projects.controls.length > 1" (click)="removeProject(i)"></span>
        </div>
        <div class="panel-body" [formGroupName]="i">
            <div class="form-group col-xs-6">
                <label>Customer</label>
                <input type="text" class="form-control" formControlName="customer_id">
                <small [hidden]="myForm.controls.projects.controls[i].controls.customer_id.valid" class="text-danger">
                    Street is required
                </small>
            </div>
            <div class="form-group col-xs-6">
                <label>Project</label>
                <input type="text" class="form-control" formControlName="project">
            </div>
        </div>
    </div>
</div>
<div class="margin-20">
    <a (click)="addProject()" style="cursor: default">
        Add another project +
    </a>
</div>
<div class="margin-20">
    <button type="submit" class="btn btn-inverse pull-right" [disabled]="!myForm.valid">Submit</button>
</div>

项目{i+1}
顾客
街道是必需的
项目
添加另一个项目+
提交

打字稿

public myForm: FormGroup; 
private projects: CustomerProject[];
private project: CustomerProject;
private showForm: boolean = false;

@Input() customer: Customer = new Customer(1, '', '', '', '', '', '', '');
@Input() listId: string;
@Input() editId: string;


constructor(
    private _fb: FormBuilder,
    private authService: AuthService,
    private projectService: CustomerProjectService
) { }


loadProjects() {
    this.projectService.getCustomerProjects(this.customer.id)
        .subscribe(projects => {
            this.projects = projects;
            console.log(this.project);
            this.initForm();
        },
        err => {
            console.error(err);
            this.authService.tokenValid();
        })
}

initForm() {
    this.myForm = this._fb.group({
        projects: this._fb.array([])
    });
    // add existing customer projects
    this.addProjects();
    //this.addProject('', '');
    this.showForm = true;
}

ngOnInit() {
    this.loadProjects();
}

ngOnChanges(changes) {
    EmitterService.get(this.editId).subscribe((customer: Customer) => {
        this.customer = customer;
        this.loadProjects();
    });
}

initProject(customer_id: string, project: string) {
    return this._fb.group({
        customer_id: [customer_id],
        project: [project]
    })
}

addProject(customer_id: string, project: string) {
    const control = <FormArray>this.myForm.controls['projects'];
    control.push(this.initProject(customer_id, project));
}

addProjects() {
    for (var i = 0; i < this.projects.length; i++){
        this.project = this.projects[i];
        var customer_id = this.project.customer_id;
        var project = this.project.project;
        this.addProject(customer_id, project);
    }
}

removeProject(i: number) {
    const control = <FormArray>this.myForm.controls['projects'];
    control.removeAt(i);
}

save(model: any) {

}

公共myForm:FormGroup；
私人项目：客户项目[]；
私人项目：客户项目；
私有showForm:boolean=false；
@输入（）客户：客户=新客户（1、、“”、“”、“”、“”、“”、“”、“”、“”、“”）；
@Input（）listId:string；
@Input（）editId:string；
建造师(
私人(fb):FormBuilder,，
私有authService:authService，
私人项目服务：CustomerProjectService
) { }
loadProjects（）{
this.projectService.getCustomerProjects（this.customer.id）
.订阅（项目=>{
这个项目=项目；
console.log（this.project）；
this.initForm（）；
},
错误=>{
控制台错误（err）；
this.authService.tokenValid（）；
})
}
initForm（）{
this.myForm=this.\u fb.group({
项目：this.\u fb.array（[]）
});
//添加现有客户项目
这是addProjects（）；
//此.addProject（“”，”）；
this.showForm=true；
}
恩戈尼尼特（）{
这是loadProjects（）；
}
ngOnChanges（更改）{
EmitterService.get（this.editId）.subscribe（（客户：客户）=>{
this.customer=customer；
这是loadProjects（）；
});
}
initProject（客户id:string，项目：string）{
将此返回。\u fb.group({
客户识别码：[客户识别码]，
项目：[项目]
})
}
addProject（客户id:string，项目：string）{
const control=this.myForm.controls['projects']；
control.push（this.initProject（customer_id，project））；
}
addProjects（）{
对于（var i=0；i

不建议立即发布表单。

UI：它变得太复杂了。显示多个表单会让用户感到困惑

用户体验：用户希望添加、编辑或删除当前的CRUD，并且不会等待按提交按钮

---

软件架构：它违反了关注点分离原则。

您应该将所有内容都放在一个表单下。在您的情况下，您应该在服务器端使用表示数组的东西。例如，Rails将以

[]

结尾的参数视为数组，并为您构建它。