Question

我有一个项目，其中可能包含许多任务，我想通过以下方式显示它：

我有表单的一部分-“主要项目信息”带有一些字段，下面是一个向该项目添加任务的按钮，或者如果您愿意的话，可以添加多个任务（另一种形式的/ s与父项相关）。 / p>

多个任务之所以使我感到震惊，是因为我的“占位符”函数生成用于样式目的的任务表单只是一个伪造的表单（它显示表单，另一个表单和另一个表单，但是它只是复制第一个表单，而不是按需生成，因此无法将多个任务保存到数据库中。

能否帮助我生成单击按钮后显示的任务组件，并允许我将响应发送到数据库？ 更容易/更简单=更好

        <form [formGroup]="projectForm" id="test-form" *ngIf="arrayItems.length">
            <div class="form-group">

                <label>Title:</label>
                <input name="title" class="form-control" formControlName="title">
            </div>

            <div class="form-group">
                <label>State:</label>
                <select class='form-control'
                        formControlName="state">

                    <option value='active'>Active</option>
                    <option value='inactive'>Inactive</option>

                </select>
            </div>
            <div class="form-group">
                <label>Comment:</label>
                <input name="comment" type="text" class="form-control" formControlName="comment">
            </div>

            <app-project-new-task *ngFor="let task of tasks" [arrayItems]="arrayItems" [projectForm]="projectForm.controls['projectTasks']">

            </app-project-new-task>


            // Here calling fake function to "plug" component
            <button (click)="addTask()">
                <fa-icon [icon]="['fas', 'plus']"></fa-icon>
            </button>

            <button type="submit" (click)="onSubmit()">Add to database</button>
        </form>

================================================ ====

<form [formGroup]="projectForm">
<div class="form-group">
    <label>Task:</label>
    <input name="taskType" class="form-control" formControlName="taskType">
</div>

<div class="form-group">
    {{ arrayItems[0].name}}
    <label>Array item to select:</label>
    <select class='form-control' name="item" formControlName="select">
        <option *ngFor="let item of arrayItems" [value]="item['id']" [selected]="item['id'] == arrayItems[0]['id']">
            {{ item['name'] }}
        </option>

    </select>
</div>
<div class="form-group">
    <label>Comment:</label>
    <input name="comment" type="text" class="form-control" formControlName="comment">
</div>

================================================ ====

export class ProjectNewComponent implements OnInit {

@ViewChildren(ProjectNewTaskComponent)
children: QueryList<ProjectNewTaskComponent>;

public tasks = [];
public arrayItems= [];
projects: any = [];
projectForm: FormGroup;

constructor(private httpService: HttpService,
            private formBuilder: FormBuilder
) {
}


ngOnInit() {
    this.httpService.getData().subscribe(
        res => {
            this.arrayItems= res['response'];
            this.buildForm();
        },
        err => {
            console.log(err);
        }
    );


}

buildForm(){
        this.projectForm = this.formBuilder.group({
            title: ['', Validators.required],
            state: 'active',
            comment: '',
            projectTasks: this.formBuilder.group({
                taskType: ['', Validators.required],
                comment: '',
                select: [this.arrayItems[0].id, Validators.required]
            })
        });
    }
}

================================================ ====

假功能

addTask() {
    this.tasks.push({ value: '' });
}

================================================ ====

这里只是InputForm

export class ProjectNewTaskComponent implements OnInit {

@Input() arrayItems: string[];
@Input() projectForm: FormGroup;
public childForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
}
}

================================================ ====

角度6-单击创建下一个（子/窗体）组件。单击复制组件。生成多个子表单

0 个答案: