Skip to content

Commit 5e40e02

Browse files
ferozahmed26ferozahmed26
authored
Merge pull request #11 from ferozahmed26/master
Custom Validation 2 Form and routing
2 parents fe86376 + 191a14b commit 5e40e02

11 files changed

+192
-3
lines changed

‎src/app/form-validation/form-validation-routing.module.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,18 @@ import { FormValidationComponent } from './form-validation.component';
55
import { BasicFormComponent } from './basic-form/basic-form.component';
66
import { TemplateFormComponent } from './template-form/template-form.component';
77
import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
8+
import { SimpleFormComponent } from './simple-form/simple-form.component';
9+
import { MasterChildFormComponent } from './master-child-form/master-child-form.component';
810

911
const routes: Routes = [{
1012
path: '',
1113
component: FormValidationComponent,
1214
children: [
1315
{ path: 'basic-form', component: BasicFormComponent },
1416
{ path: 'template-form', component: TemplateFormComponent },
15-
{ path: 'reactive-form', component: ReactiveFormComponent }
17+
{ path: 'reactive-form', component: ReactiveFormComponent },
18+
{ path: 'simple-form', component: SimpleFormComponent },
19+
{ path: 'master-child-form', component: MasterChildFormComponent }
1620
]
1721
}];
1822

‎src/app/form-validation/form-validation.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { BasicFormComponent } from './basic-form/basic-form.component';
77
import { FormValidationComponent } from './form-validation.component';
88
import { TemplateFormComponent } from './template-form/template-form.component';
99
import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
10+
import { SimpleFormComponent } from './simple-form/simple-form.component';
11+
import { MasterChildFormComponent } from './master-child-form/master-child-form.component';
1012

1113
@NgModule({
1214
imports: [
@@ -19,7 +21,7 @@ import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
1921
FormValidationComponent
2022
, BasicFormComponent
2123
, TemplateFormComponent
22-
, ReactiveFormComponent
24+
, ReactiveFormComponent, SimpleFormComponent, MasterChildFormComponent
2325
]
2426
})
2527
export class FormValidationModule { }

‎src/app/form-validation/master-child-form/master-child-form.component.css‎

Whitespace-only changes.

‎src/app/form-validation/master-child-form/master-child-form.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<p>
2+
master-child-form works!
3+
</p>

‎src/app/form-validation/master-child-form/master-child-form.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { MasterChildFormComponent } from './master-child-form.component';
4+
5+
describe('MasterChildFormComponent', () => {
6+
let component: MasterChildFormComponent;
7+
let fixture: ComponentFixture<MasterChildFormComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ MasterChildFormComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(MasterChildFormComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/form-validation/master-child-form/master-child-form.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-master-child-form',
5+
templateUrl: './master-child-form.component.html',
6+
styleUrls: ['./master-child-form.component.css']
7+
})
8+
export class MasterChildFormComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() {
13+
}
14+
15+
}

‎src/app/form-validation/simple-form/simple-form.component.css‎

Whitespace-only changes.

‎src/app/form-validation/simple-form/simple-form.component.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<div class="row">
2+
<div class="col-6">
3+
<h5>Simple form</h5>
4+
<hr/>
5+
<form>
6+
<div class="form-row">
7+
<div class="form-group col-md-6">
8+
<label for="nameField">Name</label>
9+
<input type="text" class="form-control" id="nameField" placeholder="Name">
10+
</div>
11+
<div class="form-group col-md-6">
12+
<label for="inputEmail4">Email</label>
13+
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
14+
</div>
15+
<div class="form-group col-md-6">
16+
<label for="passwordField">Password</label>
17+
<input type="password" class="form-control" id="passwordField" placeholder="Password">
18+
</div>
19+
<div class="form-group col-md-6">
20+
<label for="urlField">Url</label>
21+
<input type="url" class="form-control" id="urlField" placeholder="Url">
22+
</div>
23+
<div class="form-group col-md-6">
24+
<label for="telField">Tel</label>
25+
<input type="tel" class="form-control" id="telField" placeholder="Tel">
26+
</div>
27+
<div class="form-group col-md-6">
28+
<label for="dateField">Date</label>
29+
<input type="date" class="form-control" id="dateField" placeholder="Date">
30+
</div>
31+
<div class="form-group col-md-6">
32+
<label for="timeField">Time</label>
33+
<input type="time" class="form-control" id="timeField" placeholder="Time">
34+
</div>
35+
<div class="form-group col-md-6">
36+
<label for="dateTimeField">Date Time</label>
37+
<input type="datetime-local" class="form-control" id="dateTimeField" placeholder="Date Time">
38+
</div>
39+
<div class="form-group col-md-6">
40+
<label for="selectField">Gender</label>
41+
<select class="form-control" name="selectField" id="selectField">
42+
<option value="Male">Male</option>
43+
<option value="Female">Female</option>
44+
</select>
45+
</div>
46+
<div class="form-group col-12">
47+
<label for="addressField">Address</label>
48+
<textarea class="form-control" name="addressField" id="addressField" rows="2"></textarea>
49+
</div>
50+
</div>
51+
<div class="form-group">
52+
<label for="inputAddress">Address</label>
53+
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
54+
</div>
55+
<div class="form-group">
56+
<label for="inputAddress2">Address 2</label>
57+
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
58+
</div>
59+
<div class="form-row">
60+
<div class="form-group col-md-6">
61+
<label for="inputCity">City</label>
62+
<input type="text" class="form-control" id="inputCity">
63+
</div>
64+
<div class="form-group col-md-4">
65+
<label for="inputState">State</label>
66+
<select id="inputState" class="form-control">
67+
<option selected>Choose...</option>
68+
<option>...</option>
69+
</select>
70+
</div>
71+
<div class="form-group col-md-2">
72+
<label for="inputZip">Zip</label>
73+
<input type="text" class="form-control" id="inputZip">
74+
</div>
75+
</div>
76+
<div class="form-group">
77+
<div class="form-check">
78+
<input class="form-check-input" type="checkbox" id="gridCheck">
79+
<label class="form-check-label" for="gridCheck">
80+
Check me out
81+
</label>
82+
</div>
83+
</div>
84+
<button type="submit" class="btn btn-primary">Sign in</button>
85+
</form>
86+
</div>
87+
</div>

‎src/app/form-validation/simple-form/simple-form.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SimpleFormComponent } from './simple-form.component';
4+
5+
describe('SimpleFormComponent', () => {
6+
let component: SimpleFormComponent;
7+
let fixture: ComponentFixture<SimpleFormComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ SimpleFormComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(SimpleFormComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/form-validation/simple-form/simple-form.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-simple-form',
5+
templateUrl: './simple-form.component.html',
6+
styleUrls: ['./simple-form.component.css']
7+
})
8+
export class SimpleFormComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() {
13+
}
14+
15+
}

0 commit comments

Comments
 (0)