Adding reactive forms exploration (first) in Angular 7.2.13. · iCodeIN/JavaScript-Demos@eef620f · GitHub
Skip to content

Commit eef620f

Browse files
bennadelbennadel
committed
Adding reactive forms exploration (first) in Angular 7.2.13.
1 parent 7263807 commit eef620f

28 files changed

Lines changed: 8257 additions & 0 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions

‎demos/dynamic-reative-forms-angular7/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/

‎demos/dynamic-reative-forms-angular7/app/app.component.less‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
.switcher {
8+
display: flex;
9+
10+
&__label {
11+
flex: 0 0 auto ;
12+
}
13+
14+
&__option {
15+
color: red ;
16+
cursor: pointer ;
17+
flex: 0 0 auto ;
18+
margin: 0px 10px 0px 10px ;
19+
user-select: none ;
20+
-moz-user-select: none ;
21+
-webkit-user-select: none ;
22+
text-decoration: underline ;
23+
}
24+
}

‎demos/dynamic-reative-forms-angular7/app/app.component.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
template:
12+
`
13+
<p class="switcher">
14+
<strong class="switcher__label">Choose Form:</strong>
15+
16+
<a (click)="showForm( 'template' )" class="switcher__option">
17+
Template Form
18+
</a>
19+
or
20+
<a (click)="showForm( 'reactive' )" class="switcher__option">
21+
Reactive Form
22+
</a>
23+
</p>
24+
25+
<my-reactive-form *ngIf="( form === 'reactive' )"></my-reactive-form>
26+
<my-template-form *ngIf="( form === 'template' )"></my-template-form>
27+
`
28+
})
29+
export class AppComponent {
30+
31+
public form: "template" | "reactive";
32+
33+
// I initialize the app component.
34+
constructor() {
35+
36+
this.form = "template";
37+
38+
}
39+
40+
// ---
41+
// PUBLIC METHODS.
42+
// ---
43+
44+
// I render the selected form demo component.
45+
public showForm( selectedForm: "template" | "reactive" ) : void {
46+
47+
this.form = selectedForm;
48+
49+
}
50+
51+
}

‎demos/dynamic-reative-forms-angular7/app/app.module.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { FormsModule } from "@angular/forms";
5+
import { NgModule } from "@angular/core";
6+
import { ReactiveFormsModule } from "@angular/forms";
7+
8+
// Import the application components and services.
9+
import { AppComponent } from "./app.component";
10+
import { ReactiveFormComponent } from "./reactive-form.component";
11+
import { TemplateFormComponent } from "./template-form.component";
12+
13+
// ----------------------------------------------------------------------------------- //
14+
// ----------------------------------------------------------------------------------- //
15+
16+
@NgModule({
17+
imports: [
18+
BrowserModule,
19+
FormsModule,
20+
ReactiveFormsModule
21+
],
22+
declarations: [
23+
AppComponent,
24+
ReactiveFormComponent,
25+
TemplateFormComponent
26+
],
27+
bootstrap: [
28+
AppComponent
29+
]
30+
})
31+
export class AppModule {
32+
// ...
33+
}

‎demos/dynamic-reative-forms-angular7/app/form.component.less‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
2+
:host {
3+
display: block ;
4+
}
5+
6+
input, select, button {
7+
font-size: inherit ;
8+
}
9+
10+
.pet {
11+
border: 2px solid #e0e0e0 ;
12+
border-radius: 5px 5px 5px 5px ;
13+
margin-bottom: 10px ;
14+
padding: 10px 10px 10px 10px ;
15+
position: relative ;
16+
width: 600px ;
17+
18+
&--invalid {
19+
border-color: #fc0000 ;
20+
}
21+
22+
&__remove {
23+
cursor: pointer ;
24+
font-family: monospace ;
25+
font-size: 25px ;
26+
line-height: 25px ;
27+
position: absolute ;
28+
right: 10px ;
29+
top: 10px ;
30+
}
31+
}
32+
33+
.field {
34+
display: flex ;
35+
margin: 14px 0px 14px 0px ;
36+
37+
&__label {
38+
flex: 0 0 auto ;
39+
font-weight: bold ;
40+
margin-right: 10px ;
41+
text-align: right ;
42+
width: 75px ;
43+
}
44+
45+
&__control {}
46+
}
47+
48+
.nicknames {
49+
&__item {
50+
display: flex ;
51+
margin-top: 7px ;
52+
53+
& input {
54+
margin-right: 10px ;
55+
}
56+
}
57+
58+
&__remove {
59+
cursor: pointer ;
60+
}
61+
62+
&__add {
63+
color: red ;
64+
cursor: pointer ;
65+
font-size: 16px ;
66+
line-height: 19px ;
67+
}
68+
}
69+
70+
.actions {
71+
a {
72+
color: red ;
73+
cursor: pointer ;
74+
text-decoration: underline ;
75+
user-select: none ;
76+
-moz-user-select: none ;
77+
-webkit-user-select: none ;
78+
}
79+
}

‎demos/dynamic-reative-forms-angular7/app/main.htm‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
My First - And Possibly Last - Look At Reactive Forms In Angular 7.2.13
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
My First - And Possibly Last - Look At Reactive Forms In Angular 7.2.13
14+
</h1>
15+
16+
<my-app>
17+
<p>
18+
<em>Loading files...</em>
19+
</p>
20+
21+
<p>
22+
npm Run Scripts:
23+
</p>
24+
25+
<ul>
26+
<li>
27+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
28+
</li>
29+
<li>
30+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
31+
</li>
32+
</ul>
33+
</my-app>
34+
35+
</body>
36+
</html>

‎demos/dynamic-reative-forms-angular7/app/main.polyfill.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/es";
4+
import "zone.js/dist/zone.js";

‎demos/dynamic-reative-forms-angular7/app/main.ts‎

Lines changed: 20 additions & 0 deletions

0 commit comments

Comments
 (0)