I am making an angular 6 application using Angular dynamic form, using the link https://angular.io/guide/dynamic-form
Where I am in the need to display the form in nested format...
Scenario 1:
// Filling Project name and description
Initially, there will be two text boxes called project name and description,
let questions: QuestionBase<any>[] = [
new TextboxQuestion({
key: 'project_name',
label: 'Project name',
required: true,
type: 'text',
order: 1
}),
new TextboxQuestion({
key: 'description',
label: 'Description',
type: 'text',
order: 2
})
];
after filling up two fields user will click on add at the bottom of this form.
Scenario 2:
// Getting another form on click add
After clicking the add, another form with the inputs as,
let questions: QuestionBase<any>[] = [
new TextboxQuestion({
key: 'property_one',
label: 'Property One',
required: true,
type: 'text',
order: 1
}),
new TextboxQuestion({
key: 'property_two',
label: 'Property Two',
type: 'text',
order: 2
}),
new DropdownQuestion({
key: 'level',
label: 'Priority Level',
options: [
{ key: 'low', value: 'Low' },
{ key: 'medium', value: 'Medium' },
{ key: 'high', value: 'High' },
],
order: 3
}),
];
Needs to be displayed.
After filling up both the two forms and click on save the entire data needs to get stored.
My working example, https://stackblitz.com/edit/angular-ysy2xa
Where I am making two forms but it is taking up the last generated form. I know it a wrong approach, as I am very new in angular dynamic form, kindly help me to achieve the result of generating a new form (With properties) on clicking the add after filing up the first two input fields (Project name and description)...
