Angular 2 - Posting / Putting multiple forms at once

Question

I have a repeating Form for every CustomerProject. The repeating form shows all the Projects for a Customer. If i have for example 5 project forms, i want to edit 3 and add 2 and hit submit, posting / putting everything at once.

The question is how do i accomplish this?

Form 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>

Typescript

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) {

}

Answer 1

Its not recommended to posting forms at once.

UI: it gets too way complex. showing multiple forms makes users baffled.

UX: users expect add, edit or remove does CRUD at the moment and would not wait to press submit button.

Software Architecture: it violates separation of concern principle.