Угловой 6 - Создать следующий (дочерний / форма) компонент по щелчку. Скопируйте компонент по клику. Генерация нескольких дочерних форм - PullRequest
Новая
       11

Угловой 6 - Создать следующий (дочерний / форма) компонент по щелчку. Скопируйте компонент по клику. Генерация нескольких дочерних форм

0 голосов
/ 09 января 2019

У меня есть проект, который может содержать много задач, и я хочу показать его следующим образом:

У меня есть часть формы - «основная информация о проекте» с некоторыми полями, и ниже находится кнопка, которая добавляет задачу в этот проект, или несколько задач, если вы захотите (другая форма / формы, которая связана с родительской).

Несколько задач это то, что меня поражает, потому что моя функция "заполнитель", которая генерирует форму задачи для стилизации, является просто фальшивой (показывает форму, другую и другую, но просто копирует первую, а НЕ ГЕНЕРАЦИРУЕТ, как следует, поэтому невозможно сохранить несколько задач в базе данных).

Можете ли вы помочь мне сгенерировать компонент задачи, который будет показан после нажатия кнопки и разрешить мне отправить ответ в базу данных? Проще / проще = лучше 

        <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: '' });
}

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

Просто введите здесь 

export class ProjectNewTaskComponent implements OnInit {

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

constructor(private formBuilder: FormBuilder) {
}
}

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

...