Skip to content

Commit 9b80a4c

Browse files
amcdnljelbourn
amcdnl
authored and
jelbourn
committed
feat(schematics): address form schematic (#11425)
1 parent 81537af commit 9b80a4c

File tree

8 files changed

+512
-1
lines changed

8 files changed

+512
-1
lines changed

‎src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.full-width {
2+
width: 100%;
3+
}
4+
5+
.shipping-card {
6+
min-width: 120px;
7+
margin: 20px auto;
8+
}
9+
10+
.mat-radio-button {
11+
display: block;
12+
margin: 5px 0;
13+
}
14+
15+
.row {
16+
display: flex;
17+
flex-direction: row;
18+
}
19+
20+
.col {
21+
flex: 1;
22+
margin-right: 20px;
23+
}
24+
25+
.col:last-child {
26+
margin-right: 0;
27+
}

‎src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<form [formGroup]="addressForm" novalidate>
2+
<mat-card class="shipping-card">
3+
<mat-card-header>
4+
<mat-card-title>Shipping Information</mat-card-title>
5+
</mat-card-header>
6+
<mat-card-content>
7+
<div class="row">
8+
<div class="col">
9+
<mat-form-field class="full-width">
10+
<input matInput placeholder="Company" formControlName="company">
11+
</mat-form-field>
12+
</div>
13+
</div>
14+
<div class="row">
15+
<div class="col">
16+
<mat-form-field class="full-width">
17+
<input matInput placeholder="First name" formControlName="firstName">
18+
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
19+
First name is <strong>required</strong>
20+
</mat-error>
21+
</mat-form-field>
22+
</div>
23+
<div class="col">
24+
<mat-form-field class="full-width">
25+
<input matInput placeholder="Last name" formControlName="lastName">
26+
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
27+
Last name is <strong>required</strong>
28+
</mat-error>
29+
</mat-form-field>
30+
</div>
31+
</div>
32+
<div class="row">
33+
<div class="col">
34+
<mat-form-field class="full-width">
35+
<textarea matInput placeholder="Address" formControlName="address"></textarea>
36+
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
37+
Address is <strong>required</strong>
38+
</mat-error>
39+
</mat-form-field>
40+
</div>
41+
</div>
42+
<div class="row" *ngIf="!hasUnitNumber">
43+
<div class="col">
44+
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
45+
+ Add C/O, Apt, Suite, Unit
46+
</button>
47+
</div>
48+
</div>
49+
<div class="row" *ngIf="hasUnitNumber">
50+
<div class="col">
51+
<mat-form-field class="full-width">
52+
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
53+
</mat-form-field>
54+
</div>
55+
</div>
56+
<div class="row">
57+
<div class="col">
58+
<mat-form-field class="full-width">
59+
<input matInput placeholder="City" formControlName="city">
60+
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
61+
City is <strong>required</strong>
62+
</mat-error>
63+
</mat-form-field>
64+
</div>
65+
<div class="col">
66+
<mat-form-field class="full-width">
67+
<mat-select placeholder="State" formControlName="state">
68+
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
69+
{{ state.name }}
70+
</mat-option>
71+
</mat-select>
72+
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
73+
State is <strong>required</strong>
74+
</mat-error>
75+
</mat-form-field>
76+
</div>
77+
</div>
78+
<div class="row">
79+
<div class="col">
80+
<mat-form-field class="full-width">
81+
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number" formControlName="postalCode">
82+
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
83+
</mat-form-field>
84+
</div>
85+
</div>
86+
<div class="row">
87+
<div class="col">
88+
<mat-radio-group formControlName="shipping">
89+
<mat-radio-button value="free">Free Shipping</mat-radio-button>
90+
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
91+
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
92+
</mat-radio-group>
93+
</div>
94+
</div>
95+
</mat-card-content>
96+
<mat-card-actions>
97+
<button mat-raised-button color="primary" type="submit">Submit</button>
98+
</mat-card-actions>
99+
</mat-card>
100+
</form>

‎src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts

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

‎src/lib/schematics/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import { Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
2+
import { FormBuilder, Validators } from '@angular/forms';
3+
4+
@Component({
5+
selector: '<%= selector %>',<% if(inlineTemplate) { %>
6+
template: `
7+
<form [formGroup]="addressForm" novalidate>
8+
<mat-card class="shipping-card">
9+
<mat-card-header>
10+
<mat-card-title>Shipping Information</mat-card-title>
11+
</mat-card-header>
12+
<mat-card-content>
13+
<div class="row">
14+
<div class="col">
15+
<mat-form-field class="full-width">
16+
<input matInput placeholder="Company" formControlName="company">
17+
</mat-form-field>
18+
</div>
19+
</div>
20+
<div class="row">
21+
<div class="col">
22+
<mat-form-field class="full-width">
23+
<input matInput placeholder="First name" formControlName="firstName">
24+
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
25+
First name is <strong>required</strong>
26+
</mat-error>
27+
</mat-form-field>
28+
</div>
29+
<div class="col">
30+
<mat-form-field class="full-width">
31+
<input matInput placeholder="Last name" formControlName="lastName">
32+
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
33+
Last name is <strong>required</strong>
34+
</mat-error>
35+
</mat-form-field>
36+
</div>
37+
</div>
38+
<div class="row">
39+
<div class="col">
40+
<mat-form-field class="full-width">
41+
<textarea matInput placeholder="Address" formControlName="address"></textarea>
42+
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
43+
Address is <strong>required</strong>
44+
</mat-error>
45+
</mat-form-field>
46+
</div>
47+
</div>
48+
<div class="row" *ngIf="!hasUnitNumber">
49+
<div class="col">
50+
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
51+
+ Add C/O, Apt, Suite, Unit
52+
</button>
53+
</div>
54+
</div>
55+
<div class="row" *ngIf="hasUnitNumber">
56+
<div class="col">
57+
<mat-form-field class="full-width">
58+
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
59+
</mat-form-field>
60+
</div>
61+
</div>
62+
<div class="row">
63+
<div class="col">
64+
<mat-form-field class="full-width">
65+
<input matInput placeholder="City" formControlName="city">
66+
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
67+
City is <strong>required</strong>
68+
</mat-error>
69+
</mat-form-field>
70+
</div>
71+
<div class="col">
72+
<mat-form-field class="full-width">
73+
<mat-select placeholder="State" formControlName="state">
74+
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
75+
{{ state.name }}
76+
</mat-option>
77+
</mat-select>
78+
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
79+
State is <strong>required</strong>
80+
</mat-error>
81+
</mat-form-field>
82+
</div>
83+
</div>
84+
<div class="row">
85+
<div class="col">
86+
<mat-form-field class="full-width">
87+
<input matInput #postalCode maxlength="5" placeholder="Postal Code" type="number" formControlName="postalCode">
88+
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
89+
</mat-form-field>
90+
</div>
91+
</div>
92+
<div class="row">
93+
<div class="col">
94+
<mat-radio-group formControlName="shipping">
95+
<mat-radio-button value="free">Free Shipping</mat-radio-button>
96+
<mat-radio-button value="priority">Priority Shipping</mat-radio-button>
97+
<mat-radio-button value="nextday">Next Day Shipping</mat-radio-button>
98+
</mat-radio-group>
99+
</div>
100+
</div>
101+
</mat-card-content>
102+
<mat-card-actions>
103+
<button mat-raised-button color="primary" type="submit">Submit</button>
104+
</mat-card-actions>
105+
</mat-card>
106+
</form>
107+
`,<% } else { %>
108+
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
109+
styles: [
110+
`
111+
.full-width {
112+
width: 100%;
113+
}
114+
115+
.shipping-card {
116+
min-width: 120px;
117+
margin: 20px auto;
118+
}
119+
120+
.mat-radio-button {
121+
display: block;
122+
margin: 5px 0;
123+
}
124+
125+
.row {
126+
display: flex;
127+
flex-direction: row;
128+
}
129+
130+
.col {
131+
flex: 1;
132+
margin-right: 20px;
133+
}
134+
135+
.col:last-child {
136+
margin-right: 0;
137+
}
138+
`
139+
]<% } else { %>
140+
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
141+
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
142+
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
143+
})
144+
export class <%= classify(name) %>Component {
145+
addressForm = this.fb.group({
146+
company: null,
147+
firstName: [null, Validators.required],
148+
lastName: [null, Validators.required],
149+
address: [null, Validators.required],
150+
address2: null,
151+
city: [null, Validators.required],
152+
state: [null, Validators.required],
153+
postalCode: [null, Validators.required, Validators.minLength(5), Validators.maxLength(5)],
154+
shipping: ['free', Validators.required]
155+
});
156+
157+
hasUnitNumber = false;
158+
159+
states = [
160+
{name:'Alabama', abbreviation:'AL'},
161+
{name:'Alaska', abbreviation:'AK'},
162+
{name:'American Samoa', abbreviation:'AS'},
163+
{name:'Arizona', abbreviation:'AZ'},
164+
{name:'Arkansas', abbreviation:'AR'},
165+
{name:'California', abbreviation:'CA'},
166+
{name:'Colorado', abbreviation:'CO'},
167+
{name:'Connecticut', abbreviation:'CT'},
168+
{name:'Delaware', abbreviation:'DE'},
169+
{name:'District Of Columbia', abbreviation:'DC'},
170+
{name:'Federated States Of Micronesia', abbreviation:'FM'},
171+
{name:'Florida', abbreviation:'FL'},
172+
{name:'Georgia', abbreviation:'GA'},
173+
{name:'Guam', abbreviation:'GU'},
174+
{name:'Hawaii', abbreviation:'HI'},
175+
{name:'Idaho', abbreviation:'ID'},
176+
{name:'Illinois', abbreviation:'IL'},
177+
{name:'Indiana', abbreviation:'IN'},
178+
{name:'Iowa', abbreviation:'IA'},
179+
{name:'Kansas', abbreviation:'KS'},
180+
{name:'Kentucky', abbreviation:'KY'},
181+
{name:'Louisiana', abbreviation:'LA'},
182+
{name:'Maine', abbreviation:'ME'},
183+
{name:'Marshall Islands', abbreviation:'MH'},
184+
{name:'Maryland', abbreviation:'MD'},
185+
{name:'Massachusetts', abbreviation:'MA'},
186+
{name:'Michigan', abbreviation:'MI'},
187+
{name:'Minnesota', abbreviation:'MN'},
188+
{name:'Mississippi', abbreviation:'MS'},
189+
{name:'Missouri', abbreviation:'MO'},
190+
{name:'Montana', abbreviation:'MT'},
191+
{name:'Nebraska', abbreviation:'NE'},
192+
{name:'Nevada', abbreviation:'NV'},
193+
{name:'New Hampshire', abbreviation:'NH'},
194+
{name:'New Jersey', abbreviation:'NJ'},
195+
{name:'New Mexico', abbreviation:'NM'},
196+
{name:'New York', abbreviation:'NY'},
197+
{name:'North Carolina', abbreviation:'NC'},
198+
{name:'North Dakota', abbreviation:'ND'},
199+
{name:'Northern Mariana Islands', abbreviation:'MP'},
200+
{name:'Ohio', abbreviation:'OH'},
201+
{name:'Oklahoma', abbreviation:'OK'},
202+
{name:'Oregon', abbreviation:'OR'},
203+
{name:'Palau', abbreviation:'PW'},
204+
{name:'Pennsylvania', abbreviation:'PA'},
205+
{name:'Puerto Rico', abbreviation:'PR'},
206+
{name:'Rhode Island', abbreviation:'RI'},
207+
{name:'South Carolina', abbreviation:'SC'},
208+
{name:'South Dakota', abbreviation:'SD'},
209+
{name:'Tennessee', abbreviation:'TN'},
210+
{name:'Texas', abbreviation:'TX'},
211+
{name:'Utah', abbreviation:'UT'},
212+
{name:'Vermont', abbreviation:'VT'},
213+
{name:'Virgin Islands', abbreviation:'VI'},
214+
{name:'Virginia', abbreviation:'VA'},
215+
{name:'Washington', abbreviation:'WA'},
216+
{name:'West Virginia', abbreviation:'WV'},
217+
{name:'Wisconsin', abbreviation:'WI'},
218+
{name:'Wyoming', abbreviation:'WY'}
219+
];
220+
221+
constructor(private fb: FormBuilder) {}
222+
223+
onSubmit() {
224+
alert('Thanks!');
225+
}
226+
}

0 commit comments

Comments
 (0)