Skip to content
This repository was archived by the owner on Aug 2, 2019. It is now read-only.

Commit bf1ba1d

Browse files
d-koppenhagend-koppenhagen
committed
better way of adding form-controls dynamically with +Button (the Kara way ;-))
1 parent 788fa15 commit bf1ba1d

File tree

10 files changed

+136
-106
lines changed

10 files changed

+136
-106
lines changed

‎src/app/book-monkey/iteration-3/forms/book-form/book-form.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ <h4>Autoren</h4>
3131
<div class="eleven wide column">
3232
<div class="fields">
3333
<div formArrayName="authors"
34-
*ngFor="let control of myForm.controls.authors.controls; let i = index"
34+
*ngFor="let control of authors.controls; let i = index"
3535
class="sixteen wide field">
3636
<input formControlName="{{i}}" placeholder="Autor {{i+1}}">
3737
</div>
@@ -63,8 +63,8 @@ <h4>Thumbnails</h4>
6363
</div>
6464
<div class="eleven wide column">
6565
<div formArrayName="thumbnails"
66-
*ngFor="let control of myForm.controls.thumbnails.controls; let i = index">
67-
<div formGroupName="{{i}}" class="inline fields">
66+
*ngFor="let control of thumbnails.controls; let i = index">
67+
<div [formGroupName]="i" class="inline fields">
6868
<input formControlName="url" placeholder="http://bild{{i+1}}_Url">
6969
<input formControlName="title" placeholder="Bild {{i+1}} Titel">
7070
</div>

‎src/app/book-monkey/iteration-3/forms/book-form/book-form.component.ts

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import { BookStoreService } from '../shared/book-store.service'
1313
})
1414
export class BookFormComponent implements OnInit {
1515
myForm: FormGroup;
16-
authorsControlArray: FormArray;
17-
thumbnailsControlArray: FormArray;
16+
authors: FormArray;
17+
thumbnails: FormArray;
1818
isUpdatingBook: boolean;
1919

2020
constructor(
@@ -46,29 +46,35 @@ export class BookFormComponent implements OnInit {
4646
subtitle: book.subtitle,
4747
isbn: book.isbn,
4848
description: book.description,
49-
authors: this.fb.array(book.authors),
50-
thumbnails: this.fb.array(
51-
book.thumbnails.map(
52-
t => this.fb.group({
53-
url: this.fb.control(t.url),
54-
title: this.fb.control(t.title)
55-
})
56-
)
57-
),
58-
published: book.published
49+
authors: this.buildAuthorsArray(book.authors),
50+
thumbnails: this.buildThumbnialsArray(book.thumbnails),
51+
published: book.published
5952
});
53+
}
54+
55+
buildAuthorsArray(authors): FormArray {
56+
this.authors = this.fb.array(authors);
57+
return this.authors;
58+
}
6059

61-
// this allows us to manipulate the form at runtime
62-
this.authorsControlArray = <FormArray>this.myForm.controls['authors'];
63-
this.thumbnailsControlArray = <FormArray>this.myForm.controls['thumbnails'];
60+
buildThumbnialsArray(thumbnails): FormArray {
61+
this.thumbnails = this.fb.array(
62+
thumbnails.map(
63+
t => this.fb.group({
64+
url: this.fb.control(t.url),
65+
title: this.fb.control(t.title)
66+
})
67+
)
68+
);
69+
return this.thumbnails;
6470
}
6571

6672
addAuthorControl(){
67-
this.authorsControlArray.push(this.fb.control(''));
73+
this.authors.push(this.fb.control(''));
6874
}
6975

7076
addThumbnailControl(){
71-
this.thumbnailsControlArray.push(this.fb.group({url: [''], title: ['']}));
77+
this.thumbnails.push(this.fb.group({url: [''], title: ['']}));
7278
}
7379

7480
submitForm(formData){

‎src/app/book-monkey/iteration-3/validation/book-form/book-form.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4>Buchtitel</h4>
99
<div class="eleven wide column form">
1010
<input formControlName="title"/>
1111
<div class="ui negative message"
12-
*ngIf="myForm.controls.title.dirty && !title.valid">
12+
*ngIf="myForm.controls.title.dirty && !myForm.controls.title.valid">
1313
Geben Sie den Titel des Buches an.
1414
</div>
1515
</div>
@@ -40,7 +40,7 @@ <h4>Autoren</h4>
4040
<div class="eleven wide column">
4141
<div class="fields">
4242
<div formArrayName="authors"
43-
*ngFor="let control of myForm.controls.authors.controls; let i = index"
43+
*ngFor="let control of authors.controls; let i = index"
4444
class="sixteen wide field">
4545
<input formControlName="{{i}}" placeholder="Autor {{i+1}}">
4646
</div>
@@ -83,8 +83,8 @@ <h4>Thumbnails</h4>
8383
</div>
8484
<div class="eleven wide column">
8585
<div formArrayName="thumbnails"
86-
*ngFor="let control of myForm.controls.thumbnails.controls; let i = index">
87-
<div formGroupName="{{i}}" class="inline fields">
86+
*ngFor="let control of thumbnails.controls; let i = index">
87+
<div [formGroupName]="i" class="inline fields">
8888
<input formControlName="url" placeholder="http://bild{{i+1}}_Url">
8989
<input formControlName="title" placeholder="Bild {{i+1}} Titel">
9090
</div>

‎src/app/book-monkey/iteration-3/validation/book-form/book-form.component.ts

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { BookStoreService } from '../shared/book-store.service';
1414
})
1515
export class BookFormComponent implements OnInit {
1616
myForm: FormGroup;
17-
authorsFormArray: FormArray;
18-
thumbnailsFormArray: FormArray;
17+
authors: FormArray;
18+
thumbnails: FormArray;
1919
isUpdatingBook: boolean;
2020

2121
constructor(
@@ -50,32 +50,38 @@ export class BookFormComponent implements OnInit {
5050
validateIsbn
5151
])],
5252
description: [book.description],
53-
authors: this.fb.array(book.authors, Validators.required),
54-
thumbnails: this.fb.array(
55-
book.thumbnails.map(
56-
t => this.fb.group({
57-
url: this.fb.control(t.url, Validators.required),
58-
title: this.fb.control(t.title)
59-
})
60-
)
61-
),
53+
authors: this.buildAuthorsArray(book.authors),
54+
thumbnails: this.buildThumbnialsArray(book.thumbnails),
6255
published: [
6356
book.published,
6457
Validators.pattern('([1-9]|0[1-9]|(1|2)[0-9]|3[0-1])\.([1-9]|0[1-9]|1[0-2])\.[0-9]{4}')
6558
]
6659
});
60+
}
61+
62+
buildAuthorsArray(authors): FormArray {
63+
this.authors = this.fb.array(authors, Validators.required);
64+
return this.authors;
65+
}
6766

68-
// this allows us to manipulate the form at runtime
69-
this.authorsFormArray = <FormArray>this.myForm.controls['authors'];
70-
this.thumbnailsFormArray = <FormArray>this.myForm.controls['thumbnails'];
67+
buildThumbnialsArray(thumbnails): FormArray {
68+
this.thumbnails = this.fb.array(
69+
thumbnails.map(
70+
t => this.fb.group({
71+
url: this.fb.control(t.url, Validators.required),
72+
title: this.fb.control(t.title)
73+
})
74+
)
75+
);
76+
return this.thumbnails;
7177
}
7278

7379
addAuthorControl(){
74-
this.authorsFormArray.push(this.fb.control(''));
80+
this.authors.push(this.fb.control(''));
7581
}
7682

7783
addThumbnailControl(){
78-
this.thumbnailsFormArray.push(this.fb.group({url: [''], title: ['']}));
84+
this.thumbnails.push(this.fb.group({url: [''], title: ['']}));
7985
}
8086

8187
submitForm(formData){

‎src/app/book-monkey/iteration-4/http/book-form/book-form.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4>Buchtitel</h4>
99
<div class="eleven wide column form">
1010
<input formControlName="title"/>
1111
<div class="ui negative message"
12-
*ngIf="myForm.controls.title.dirty && !title.valid">
12+
*ngIf="myForm.controls.title.dirty && !myForm.controls.title.valid">
1313
Geben Sie den Titel des Buches an.
1414
</div>
1515
</div>
@@ -40,7 +40,7 @@ <h4>Autoren</h4>
4040
<div class="eleven wide column">
4141
<div class="fields">
4242
<div formArrayName="authors"
43-
*ngFor="let control of myForm.controls.authors.controls; let i = index"
43+
*ngFor="let control of authors.controls; let i = index"
4444
class="sixteen wide field">
4545
<input formControlName="{{i}}" placeholder="Autor {{i+1}}">
4646
</div>
@@ -83,8 +83,8 @@ <h4>Thumbnails</h4>
8383
</div>
8484
<div class="eleven wide column">
8585
<div formArrayName="thumbnails"
86-
*ngFor="let control of myForm.controls.thumbnails.controls; let i = index">
87-
<div formGroupName="{{i}}" class="inline fields">
86+
*ngFor="let control of thumbnails.controls; let i = index">
87+
<div [formGroupName]="i" class="inline fields">
8888
<input formControlName="url" placeholder="http://bild{{i+1}}_Url">
8989
<input formControlName="title" placeholder="Bild {{i+1}} Titel">
9090
</div>

‎src/app/book-monkey/iteration-4/http/book-form/book-form.component.ts

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { BookStoreService } from '../shared/book-store.service';
1414
})
1515
export class BookFormComponent implements OnInit {
1616
myForm: FormGroup;
17-
authorsFormArray: FormArray;
18-
thumbnailsFormArray: FormArray;
17+
authors: FormArray;
18+
thumbnails: FormArray;
1919
isUpdatingBook: boolean;
2020

2121
constructor(
@@ -39,7 +39,7 @@ export class BookFormComponent implements OnInit {
3939
});
4040
}
4141

42-
initBook(book?:Book){
42+
initBook(book?:Book){
4343
if(!book) book = new Book('', '', [''], new Date(), '', 0, [{url:'', title: ''}], '');
4444

4545
this.myForm = this.fb.group({
@@ -50,32 +50,38 @@ export class BookFormComponent implements OnInit {
5050
validateIsbn
5151
])],
5252
description: [book.description],
53-
authors: this.fb.array(book.authors, Validators.required),
54-
thumbnails: this.fb.array(
55-
book.thumbnails.map(
56-
t => this.fb.group({
57-
url: this.fb.control(t.url, Validators.required),
58-
title: this.fb.control(t.title)
59-
})
60-
)
61-
),
53+
authors: this.buildAuthorsArray(book.authors),
54+
thumbnails: this.buildThumbnialsArray(book.thumbnails),
6255
published: [
6356
book.published,
6457
Validators.pattern('([1-9]|0[1-9]|(1|2)[0-9]|3[0-1])\.([1-9]|0[1-9]|1[0-2])\.[0-9]{4}')
6558
]
6659
});
67-
68-
// this allows us to manipulate the form at runtime
69-
this.authorsFormArray = <FormArray>this.myForm.controls['authors'];
70-
this.thumbnailsFormArray = <FormArray>this.myForm.controls['thumbnails'];
60+
}
61+
62+
buildAuthorsArray(authors): FormArray {
63+
this.authors = this.fb.array(authors, Validators.required);
64+
return this.authors;
65+
}
66+
67+
buildThumbnialsArray(thumbnails): FormArray {
68+
this.thumbnails = this.fb.array(
69+
thumbnails.map(
70+
t => this.fb.group({
71+
url: this.fb.control(t.url, Validators.required),
72+
title: this.fb.control(t.title)
73+
})
74+
)
75+
);
76+
return this.thumbnails;
7177
}
7278

7379
addAuthorControl(){
74-
this.authorsFormArray.push(this.fb.control(''));
80+
this.authors.push(this.fb.control(''));
7581
}
7682

7783
addThumbnailControl(){
78-
this.thumbnailsFormArray.push(this.fb.group({url: [''], title: ['']}));
84+
this.thumbnails.push(this.fb.group({url: [''], title: ['']}));
7985
}
8086

8187
submitForm(formData){

‎src/app/book-monkey/iteration-5/directives/book-form/book-form.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4>Buchtitel</h4>
99
<div class="eleven wide column form">
1010
<input formControlName="title"/>
1111
<div class="ui negative message"
12-
*ngIf="myForm.controls.title.dirty && !title.valid">
12+
*ngIf="myForm.controls.title.dirty && !myForm.controls.title.valid">
1313
Geben Sie den Titel des Buches an.
1414
</div>
1515
</div>
@@ -40,7 +40,7 @@ <h4>Autoren</h4>
4040
<div class="eleven wide column">
4141
<div class="fields">
4242
<div formArrayName="authors"
43-
*ngFor="let control of myForm.controls.authors.controls; let i = index"
43+
*ngFor="let control of authors.controls; let i = index"
4444
class="sixteen wide field">
4545
<input formControlName="{{i}}" placeholder="Autor {{i+1}}">
4646
</div>
@@ -83,8 +83,8 @@ <h4>Thumbnails</h4>
8383
</div>
8484
<div class="eleven wide column">
8585
<div formArrayName="thumbnails"
86-
*ngFor="let control of myForm.controls.thumbnails.controls; let i = index">
87-
<div formGroupName="{{i}}" class="inline fields">
86+
*ngFor="let control of thumbnails.controls; let i = index">
87+
<div [formGroupName]="i" class="inline fields">
8888
<input formControlName="url" placeholder="http://bild{{i+1}}_Url">
8989
<input formControlName="title" placeholder="Bild {{i+1}} Titel">
9090
</div>

‎src/app/book-monkey/iteration-5/directives/book-form/book-form.component.ts

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { BookStoreService } from '../shared/book-store.service';
1414
})
1515
export class BookFormComponent implements OnInit {
1616
myForm: FormGroup;
17-
authorsFormArray: FormArray;
18-
thumbnailsFormArray: FormArray;
17+
authors: FormArray;
18+
thumbnails: FormArray;
1919
isUpdatingBook: boolean;
2020

2121
constructor(
@@ -39,7 +39,7 @@ export class BookFormComponent implements OnInit {
3939
});
4040
}
4141

42-
initBook(book?:Book){
42+
initBook(book?:Book){
4343
if(!book) book = new Book('', '', [''], new Date(), '', 0, [{url:'', title: ''}], '');
4444

4545
this.myForm = this.fb.group({
@@ -50,32 +50,38 @@ export class BookFormComponent implements OnInit {
5050
validateIsbn
5151
])],
5252
description: [book.description],
53-
authors: this.fb.array(book.authors, Validators.required),
54-
thumbnails: this.fb.array(
55-
book.thumbnails.map(
56-
t => this.fb.group({
57-
url: this.fb.control(t.url, Validators.required),
58-
title: this.fb.control(t.title)
59-
})
60-
)
61-
),
53+
authors: this.buildAuthorsArray(book.authors),
54+
thumbnails: this.buildThumbnialsArray(book.thumbnails),
6255
published: [
6356
book.published,
6457
Validators.pattern('([1-9]|0[1-9]|(1|2)[0-9]|3[0-1])\.([1-9]|0[1-9]|1[0-2])\.[0-9]{4}')
6558
]
6659
});
67-
68-
// this allows us to manipulate the form at runtime
69-
this.authorsFormArray = <FormArray>this.myForm.controls['authors'];
70-
this.thumbnailsFormArray = <FormArray>this.myForm.controls['thumbnails'];
60+
}
61+
62+
buildAuthorsArray(authors): FormArray {
63+
this.authors = this.fb.array(authors, Validators.required);
64+
return this.authors;
65+
}
66+
67+
buildThumbnialsArray(thumbnails): FormArray {
68+
this.thumbnails = this.fb.array(
69+
thumbnails.map(
70+
t => this.fb.group({
71+
url: this.fb.control(t.url, Validators.required),
72+
title: this.fb.control(t.title)
73+
})
74+
)
75+
);
76+
return this.thumbnails;
7177
}
7278

7379
addAuthorControl(){
74-
this.authorsFormArray.push(this.fb.control(''));
80+
this.authors.push(this.fb.control(''));
7581
}
7682

7783
addThumbnailControl(){
78-
this.thumbnailsFormArray.push(this.fb.group({url: [''], title: ['']}));
84+
this.thumbnails.push(this.fb.group({url: [''], title: ['']}));
7985
}
8086

8187
submitForm(formData){

0 commit comments

Comments
 (0)