forms - Angular 2 - 一次发布/放置多个表单

Question

我为每个 CustomerProject 都有一个重复的表单。重复表格显示了客户的所有项目。例如，如果我有 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>

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

不建议一次性发布表单。

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

UX:用户希望在此刻添加、编辑或删除 CRUD，并且不会等到按下提交按钮。

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