Kind of recursive usage of an Component possible?
After searching for like two hours for a solution I decided to ask some pros suspecting the solution could be quite simple.
It is an Angular7 project.
I would like to have a "goal" in my goals component with a button "+". When you click that button I want to have annother goal being added to the page. So I want to click a button of the goal component to create a new goal, which is something like recursive to me.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal id="lastGivenId+1"></app-goal>
goals.component.ts:
import Component, OnInit from '@angular/core';
@Component(
selector: 'app-goals',
templateUrl: './goals.component.html',
styleUrls: ['./goals.component.scss']
)
export class GoalsComponent implements OnInit
lastGivenId: number = 0;
constructor()
ngOnInit()
goal.component.ts and goal.component.html:
//Typescript code
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID:number)
// var goalElement = document.registerElement('app-goal');
// document.body.appendChild(new goalElement());
let newGoal = document.createElement("app-goal");
newGoal.setAttribute("id", "999");
let currentGoal = document.getElementById(currentGoalID.toString());
document.body.insertBefore(newGoal, currentGoal);
<html>
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>This way, it creates an app-goal element, but the div and button elements within the app-goal element is missing.
How can this problem be solved? Any help is welcome. Thanks in advance.
html
angular typescript components asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
add a comment |
After searching for like two hours for a solution I decided to ask some pros suspecting the solution could be quite simple.
It is an Angular7 project.
I would like to have a "goal" in my goals component with a button "+". When you click that button I want to have annother goal being added to the page. So I want to click a button of the goal component to create a new goal, which is something like recursive to me.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal id="lastGivenId+1"></app-goal>
goals.component.ts:
import Component, OnInit from '@angular/core';
@Component(
selector: 'app-goals',
templateUrl: './goals.component.html',
styleUrls: ['./goals.component.scss']
)
export class GoalsComponent implements OnInit
lastGivenId: number = 0;
constructor()
ngOnInit()
goal.component.ts and goal.component.html:
//Typescript code
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID:number)
// var goalElement = document.registerElement('app-goal');
// document.body.appendChild(new goalElement());
let newGoal = document.createElement("app-goal");
newGoal.setAttribute("id", "999");
let currentGoal = document.getElementById(currentGoalID.toString());
document.body.insertBefore(newGoal, currentGoal);
<html>
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>This way, it creates an app-goal element, but the div and button elements within the app-goal element is missing.
How can this problem be solved? Any help is welcome. Thanks in advance.
html
angular typescript components asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
add a comment |
After searching for like two hours for a solution I decided to ask some pros suspecting the solution could be quite simple.
It is an Angular7 project.
I would like to have a "goal" in my goals component with a button "+". When you click that button I want to have annother goal being added to the page. So I want to click a button of the goal component to create a new goal, which is something like recursive to me.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal id="lastGivenId+1"></app-goal>
goals.component.ts:
import Component, OnInit from '@angular/core';
@Component(
selector: 'app-goals',
templateUrl: './goals.component.html',
styleUrls: ['./goals.component.scss']
)
export class GoalsComponent implements OnInit
lastGivenId: number = 0;
constructor()
ngOnInit()
goal.component.ts and goal.component.html:
//Typescript code
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID:number)
// var goalElement = document.registerElement('app-goal');
// document.body.appendChild(new goalElement());
let newGoal = document.createElement("app-goal");
newGoal.setAttribute("id", "999");
let currentGoal = document.getElementById(currentGoalID.toString());
document.body.insertBefore(newGoal, currentGoal);
<html>
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>This way, it creates an app-goal element, but the div and button elements within the app-goal element is missing.
How can this problem be solved? Any help is welcome. Thanks in advance.
html
angular typescript components asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
After searching for like two hours for a solution I decided to ask some pros suspecting the solution could be quite simple.
It is an Angular7 project.
I would like to have a "goal" in my goals component with a button "+". When you click that button I want to have annother goal being added to the page. So I want to click a button of the goal component to create a new goal, which is something like recursive to me.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal id="lastGivenId+1"></app-goal>
goals.component.ts:
import Component, OnInit from '@angular/core';
@Component(
selector: 'app-goals',
templateUrl: './goals.component.html',
styleUrls: ['./goals.component.scss']
)
export class GoalsComponent implements OnInit
lastGivenId: number = 0;
constructor()
ngOnInit()
goal.component.ts and goal.component.html:
//Typescript code
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID:number)
// var goalElement = document.registerElement('app-goal');
// document.body.appendChild(new goalElement());
let newGoal = document.createElement("app-goal");
newGoal.setAttribute("id", "999");
let currentGoal = document.getElementById(currentGoalID.toString());
document.body.insertBefore(newGoal, currentGoal);
<html>
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>This way, it creates an app-goal element, but the div and button elements within the app-goal element is missing.
How can this problem be solved? Any help is welcome. Thanks in advance.
//Typescript code
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID:number)
// var goalElement = document.registerElement('app-goal');
// document.body.appendChild(new goalElement());
let newGoal = document.createElement("app-goal");
newGoal.setAttribute("id", "999");
let currentGoal = document.getElementById(currentGoalID.toString());
document.body.insertBefore(newGoal, currentGoal);
<html>
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>//Typescript code
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID:number)
// var goalElement = document.registerElement('app-goal');
// document.body.appendChild(new goalElement());
let newGoal = document.createElement("app-goal");
newGoal.setAttribute("id", "999");
let currentGoal = document.getElementById(currentGoalID.toString());
document.body.insertBefore(newGoal, currentGoal);
<html>
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>html
angular typescript components html
angular typescript components asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
asked Nov 15 '18 at 19:08
Niklas24Niklas24
84
84
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
First glance: delete the html tags from your goal.component.html file.
Next: you can recursively add app-goal using angular. Inserting app-goal element the javascript way only adds the <app-goal></app-goal> object. It doesn't create an angular component. It doesn't bind your data.
Also if you're using Angular's @Input, you need to assign a component input with square braces. Do not use tags.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal [id]="lastGivenId+1"></app-goal>
goal.component.html:
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
<div *ngFor="let subGoal of subGoals">
<app-goal [id]="subGoal.id"></app-goal>
</div>
goal.component.ts:
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
subGoals: Array<any> = ;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID: number)
this.subGoals.push(id: currentGoalID);
You can also use a service to store your goals and subgoals to access them later.
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
add a comment |
I think what you're looking for is a Reactive Form with FormArray with dynamically added form controls.
Take a look at this for eg:
import Component from '@angular/core';
import FormControl, FormGroup, FormArray, FormBuilder from '@angular/forms';
@Component(...)
export class GoalsComponent
goalsForm: FormGroup;
constructor(private fb: FormBuilder)
ngOnInit()
this.goalsForm = this.fb.group(
goals: this.fb.array()
);
onFormSubmit()
console.log('Form Value: ', this.goalsForm.value);
get goals()
return (<FormArray>this.goalsForm.get('goals')).controls;
addGoal()
(<FormArray>this.goalsForm.get('goals')).push(this.fb.control(null));
And here's the template for this:
<h2>Goals:</h2>
<form [formGroup]="goalsForm" (submit)="onFormSubmit()">
<button type="button" (click)="addGoal()">Add Goal</button>
<hr>
<div *ngFor="let goal of goals; let i = index;" formArrayName="goals">
<div>
<label for="goal">Goal i + 1 : </label>
<input type="text" id="goal" [formControlName]="i">
</div>
<br>
</div>
<hr>
<button>Submit Form</button>
</form>
Here's a Sample StackBlitz for your ref.
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
Thanks a lot for answering. But what I'd like to happen in your Sample StackBlitz is that when clicking the Add button there would apper annother Add button. The thing is I want to have an upper goal and be able to create a lower goal to that upper goal.
– Niklas24
Nov 15 '18 at 20:04
And then each lower goal will have it's own lower goal?
– SiddAjmera
Nov 15 '18 at 20:05
Exactly. Each goal (upper or lower goal) can have it's own lower goal, but it doens't need to.
– Niklas24
Nov 15 '18 at 20:12
There can also be multiple lower goals to an upper goal. Every goal shall have a name (I used a div element in order to present the name) and it's add button to create a lower goal.
– Niklas24
Nov 15 '18 at 20:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326385%2fkind-of-recursive-usage-of-an-component-possible%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
First glance: delete the html tags from your goal.component.html file.
Next: you can recursively add app-goal using angular. Inserting app-goal element the javascript way only adds the <app-goal></app-goal> object. It doesn't create an angular component. It doesn't bind your data.
Also if you're using Angular's @Input, you need to assign a component input with square braces. Do not use tags.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal [id]="lastGivenId+1"></app-goal>
goal.component.html:
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
<div *ngFor="let subGoal of subGoals">
<app-goal [id]="subGoal.id"></app-goal>
</div>
goal.component.ts:
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
subGoals: Array<any> = ;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID: number)
this.subGoals.push(id: currentGoalID);
You can also use a service to store your goals and subgoals to access them later.
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
add a comment |
First glance: delete the html tags from your goal.component.html file.
Next: you can recursively add app-goal using angular. Inserting app-goal element the javascript way only adds the <app-goal></app-goal> object. It doesn't create an angular component. It doesn't bind your data.
Also if you're using Angular's @Input, you need to assign a component input with square braces. Do not use tags.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal [id]="lastGivenId+1"></app-goal>
goal.component.html:
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
<div *ngFor="let subGoal of subGoals">
<app-goal [id]="subGoal.id"></app-goal>
</div>
goal.component.ts:
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
subGoals: Array<any> = ;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID: number)
this.subGoals.push(id: currentGoalID);
You can also use a service to store your goals and subgoals to access them later.
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
add a comment |
First glance: delete the html tags from your goal.component.html file.
Next: you can recursively add app-goal using angular. Inserting app-goal element the javascript way only adds the <app-goal></app-goal> object. It doesn't create an angular component. It doesn't bind your data.
Also if you're using Angular's @Input, you need to assign a component input with square braces. Do not use tags.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal [id]="lastGivenId+1"></app-goal>
goal.component.html:
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
<div *ngFor="let subGoal of subGoals">
<app-goal [id]="subGoal.id"></app-goal>
</div>
goal.component.ts:
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
subGoals: Array<any> = ;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID: number)
this.subGoals.push(id: currentGoalID);
You can also use a service to store your goals and subgoals to access them later.
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
First glance: delete the html tags from your goal.component.html file.
Next: you can recursively add app-goal using angular. Inserting app-goal element the javascript way only adds the <app-goal></app-goal> object. It doesn't create an angular component. It doesn't bind your data.
Also if you're using Angular's @Input, you need to assign a component input with square braces. Do not use tags.
goals.component.html:
<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal [id]="lastGivenId+1"></app-goal>
goal.component.html:
<div id="id" class="goal">goalid</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
<div *ngFor="let subGoal of subGoals">
<app-goal [id]="subGoal.id"></app-goal>
</div>
goal.component.ts:
import Component, OnInit, Input from '@angular/core';
@Component(
selector: 'app-goal',
templateUrl: './goal.component.html',
styleUrls: ['./goal.component.scss']
)
export class GoalComponent implements OnInit
@Input() id : number;
subGoals: Array<any> = ;
constructor()
ngOnInit()
onAddLowerGoal(currentGoalID: number)
this.subGoals.push(id: currentGoalID);
You can also use a service to store your goals and subgoals to access them later.
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
answered Nov 16 '18 at 9:37
JasmonateJasmonate
30836
30836
add a comment |
add a comment |
I think what you're looking for is a Reactive Form with FormArray with dynamically added form controls.
Take a look at this for eg:
import Component from '@angular/core';
import FormControl, FormGroup, FormArray, FormBuilder from '@angular/forms';
@Component(...)
export class GoalsComponent
goalsForm: FormGroup;
constructor(private fb: FormBuilder)
ngOnInit()
this.goalsForm = this.fb.group(
goals: this.fb.array()
);
onFormSubmit()
console.log('Form Value: ', this.goalsForm.value);
get goals()
return (<FormArray>this.goalsForm.get('goals')).controls;
addGoal()
(<FormArray>this.goalsForm.get('goals')).push(this.fb.control(null));
And here's the template for this:
<h2>Goals:</h2>
<form [formGroup]="goalsForm" (submit)="onFormSubmit()">
<button type="button" (click)="addGoal()">Add Goal</button>
<hr>
<div *ngFor="let goal of goals; let i = index;" formArrayName="goals">
<div>
<label for="goal">Goal i + 1 : </label>
<input type="text" id="goal" [formControlName]="i">
</div>
<br>
</div>
<hr>
<button>Submit Form</button>
</form>
Here's a Sample StackBlitz for your ref.
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
Thanks a lot for answering. But what I'd like to happen in your Sample StackBlitz is that when clicking the Add button there would apper annother Add button. The thing is I want to have an upper goal and be able to create a lower goal to that upper goal.
– Niklas24
Nov 15 '18 at 20:04
And then each lower goal will have it's own lower goal?
– SiddAjmera
Nov 15 '18 at 20:05
Exactly. Each goal (upper or lower goal) can have it's own lower goal, but it doens't need to.
– Niklas24
Nov 15 '18 at 20:12
There can also be multiple lower goals to an upper goal. Every goal shall have a name (I used a div element in order to present the name) and it's add button to create a lower goal.
– Niklas24
Nov 15 '18 at 20:38
add a comment |
I think what you're looking for is a Reactive Form with FormArray with dynamically added form controls.
Take a look at this for eg:
import Component from '@angular/core';
import FormControl, FormGroup, FormArray, FormBuilder from '@angular/forms';
@Component(...)
export class GoalsComponent
goalsForm: FormGroup;
constructor(private fb: FormBuilder)
ngOnInit()
this.goalsForm = this.fb.group(
goals: this.fb.array()
);
onFormSubmit()
console.log('Form Value: ', this.goalsForm.value);
get goals()
return (<FormArray>this.goalsForm.get('goals')).controls;
addGoal()
(<FormArray>this.goalsForm.get('goals')).push(this.fb.control(null));
And here's the template for this:
<h2>Goals:</h2>
<form [formGroup]="goalsForm" (submit)="onFormSubmit()">
<button type="button" (click)="addGoal()">Add Goal</button>
<hr>
<div *ngFor="let goal of goals; let i = index;" formArrayName="goals">
<div>
<label for="goal">Goal i + 1 : </label>
<input type="text" id="goal" [formControlName]="i">
</div>
<br>
</div>
<hr>
<button>Submit Form</button>
</form>
Here's a Sample StackBlitz for your ref.
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
Thanks a lot for answering. But what I'd like to happen in your Sample StackBlitz is that when clicking the Add button there would apper annother Add button. The thing is I want to have an upper goal and be able to create a lower goal to that upper goal.
– Niklas24
Nov 15 '18 at 20:04
And then each lower goal will have it's own lower goal?
– SiddAjmera
Nov 15 '18 at 20:05
Exactly. Each goal (upper or lower goal) can have it's own lower goal, but it doens't need to.
– Niklas24
Nov 15 '18 at 20:12
There can also be multiple lower goals to an upper goal. Every goal shall have a name (I used a div element in order to present the name) and it's add button to create a lower goal.
– Niklas24
Nov 15 '18 at 20:38
add a comment |
I think what you're looking for is a Reactive Form with FormArray with dynamically added form controls.
Take a look at this for eg:
import Component from '@angular/core';
import FormControl, FormGroup, FormArray, FormBuilder from '@angular/forms';
@Component(...)
export class GoalsComponent
goalsForm: FormGroup;
constructor(private fb: FormBuilder)
ngOnInit()
this.goalsForm = this.fb.group(
goals: this.fb.array()
);
onFormSubmit()
console.log('Form Value: ', this.goalsForm.value);
get goals()
return (<FormArray>this.goalsForm.get('goals')).controls;
addGoal()
(<FormArray>this.goalsForm.get('goals')).push(this.fb.control(null));
And here's the template for this:
<h2>Goals:</h2>
<form [formGroup]="goalsForm" (submit)="onFormSubmit()">
<button type="button" (click)="addGoal()">Add Goal</button>
<hr>
<div *ngFor="let goal of goals; let i = index;" formArrayName="goals">
<div>
<label for="goal">Goal i + 1 : </label>
<input type="text" id="goal" [formControlName]="i">
</div>
<br>
</div>
<hr>
<button>Submit Form</button>
</form>
Here's a Sample StackBlitz for your ref.
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
I think what you're looking for is a Reactive Form with FormArray with dynamically added form controls.
Take a look at this for eg:
import Component from '@angular/core';
import FormControl, FormGroup, FormArray, FormBuilder from '@angular/forms';
@Component(...)
export class GoalsComponent
goalsForm: FormGroup;
constructor(private fb: FormBuilder)
ngOnInit()
this.goalsForm = this.fb.group(
goals: this.fb.array()
);
onFormSubmit()
console.log('Form Value: ', this.goalsForm.value);
get goals()
return (<FormArray>this.goalsForm.get('goals')).controls;
addGoal()
(<FormArray>this.goalsForm.get('goals')).push(this.fb.control(null));
And here's the template for this:
<h2>Goals:</h2>
<form [formGroup]="goalsForm" (submit)="onFormSubmit()">
<button type="button" (click)="addGoal()">Add Goal</button>
<hr>
<div *ngFor="let goal of goals; let i = index;" formArrayName="goals">
<div>
<label for="goal">Goal i + 1 : </label>
<input type="text" id="goal" [formControlName]="i">
</div>
<br>
</div>
<hr>
<button>Submit Form</button>
</form>
Here's a Sample StackBlitz for your ref.
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
answered Nov 15 '18 at 19:25
SiddAjmeraSiddAjmera
15.6k31239
15.6k31239
Thanks a lot for answering. But what I'd like to happen in your Sample StackBlitz is that when clicking the Add button there would apper annother Add button. The thing is I want to have an upper goal and be able to create a lower goal to that upper goal.
– Niklas24
Nov 15 '18 at 20:04
And then each lower goal will have it's own lower goal?
– SiddAjmera
Nov 15 '18 at 20:05
Exactly. Each goal (upper or lower goal) can have it's own lower goal, but it doens't need to.
– Niklas24
Nov 15 '18 at 20:12
There can also be multiple lower goals to an upper goal. Every goal shall have a name (I used a div element in order to present the name) and it's add button to create a lower goal.
– Niklas24
Nov 15 '18 at 20:38
add a comment |
Thanks a lot for answering. But what I'd like to happen in your Sample StackBlitz is that when clicking the Add button there would apper annother Add button. The thing is I want to have an upper goal and be able to create a lower goal to that upper goal.
– Niklas24
Nov 15 '18 at 20:04
And then each lower goal will have it's own lower goal?
– SiddAjmera
Nov 15 '18 at 20:05
Exactly. Each goal (upper or lower goal) can have it's own lower goal, but it doens't need to.
– Niklas24
Nov 15 '18 at 20:12
There can also be multiple lower goals to an upper goal. Every goal shall have a name (I used a div element in order to present the name) and it's add button to create a lower goal.
– Niklas24
Nov 15 '18 at 20:38
Thanks a lot for answering. But what I'd like to happen in your Sample StackBlitz is that when clicking the Add button there would apper annother Add button. The thing is I want to have an upper goal and be able to create a lower goal to that upper goal.
– Niklas24
Nov 15 '18 at 20:04
Thanks a lot for answering. But what I'd like to happen in your Sample StackBlitz is that when clicking the Add button there would apper annother Add button. The thing is I want to have an upper goal and be able to create a lower goal to that upper goal.
– Niklas24
Nov 15 '18 at 20:04
And then each lower goal will have it's own lower goal?
– SiddAjmera
Nov 15 '18 at 20:05
And then each lower goal will have it's own lower goal?
– SiddAjmera
Nov 15 '18 at 20:05
Exactly. Each goal (upper or lower goal) can have it's own lower goal, but it doens't need to.
– Niklas24
Nov 15 '18 at 20:12
Exactly. Each goal (upper or lower goal) can have it's own lower goal, but it doens't need to.
– Niklas24
Nov 15 '18 at 20:12
There can also be multiple lower goals to an upper goal. Every goal shall have a name (I used a div element in order to present the name) and it's add button to create a lower goal.
– Niklas24
Nov 15 '18 at 20:38
There can also be multiple lower goals to an upper goal. Every goal shall have a name (I used a div element in order to present the name) and it's add button to create a lower goal.
– Niklas24
Nov 15 '18 at 20:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326385%2fkind-of-recursive-usage-of-an-component-possible%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
