Angular 2 - Mehrere Formulare auf einmal verschicken

Question

Ich habe ein wiederholendes Formular für jedes CustomerProject. Das sich wiederholende Formular zeigt alle Projekte für einen Kunden an. Wenn ich zum Beispiel 5 Projektformulare habe, möchte ich 3 bearbeiten und 2 hinzufügen und auf "Senden" klicken und alles auf einmal posten/posten.

Die Frage ist, wie kann ich das erreichen?

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

Typoskript

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

Es ist nicht auf die Entsendung Formen auf einmal empfohlen.

UI: es wird zu komplex. das Zeigen mehrerer Formen macht Benutzer verwirrt.

UX: Benutzer erwarten Hinzufügen, Bearbeiten oder Entfernen tut CRUD im Moment und würde nicht warten, um Senden Schaltfläche drücken.

Software-Architektur: Es verletzt das Prinzip der Trennung von Bedenken.