Skip to content

Commit 774c928

Browse files
Marina-L-StoyanovaMarina-L-Stoyanova
authored
feat(forms): updating the reactive forms sample with new components (#3453)
1 parent d4b84ea commit 774c928

5 files changed

Lines changed: 106 additions & 26 deletions

File tree

‎src/app/app.module.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { FormsModule } from '@angular/forms';
44
import { BrowserModule, HammerModule } from '@angular/platform-browser';
55
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
66
import {
7-
IgxAutocompleteModule, IgxButtonModule, IgxButtonGroupModule, IgxDropDownModule,
8-
IgxIconModule, IgxInputGroupModule, IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule, IgxTreeModule
7+
IgxAutocompleteModule, IgxButtonModule, IgxButtonGroupModule, IgxDateRangePickerModule, IgxDropDownModule,
8+
IgxIconModule, IgxInputGroupModule, IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule, IgxSliderModule, IgxTreeModule
99
} from 'igniteui-angular';
1010
import { AppRoutingModule } from './app-routing.module';
1111
import { AppComponent } from './app.component';
@@ -39,7 +39,10 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
3939
FormsModule,
4040
HttpClientModule,
4141
HammerModule,
42-
NgbModule
42+
NgbModule,
43+
IgxSliderModule,
44+
IgxDateRangePickerModule,
45+
IgxDropDownModule
4346
],
4447
providers: []
4548
})

‎src/app/data-entries/data-entries.module.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { NgModule } from '@angular/core';
44
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
55
import {
66
IgcFormsModule,
7-
IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxIconButtonDirective, IgxCardModule, IgxCheckboxModule, IgxChipsAreaComponent, IgxChipsModule, IgxComboModule,
8-
IgxDatePickerModule, IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
7+
IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxIconButtonDirective, IgxCalendarModule, IgxCardModule, IgxCheckboxModule, IgxChipsAreaComponent, IgxChipsModule, IgxComboModule,
8+
IgxDatePickerModule, IgxDateRangePickerModule, IgxDialogModule, IgxDividerModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
99
IgxIconModule, IgxInputGroupModule, IgxNavbarModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule,
10-
IgxSelectModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule, IgxTreeGridModule, IgxTreeModule
10+
IgxSelectModule, IgxSlideComponent, IgxSliderModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule, IgxTreeGridModule, IgxTreeModule
1111
} from 'igniteui-angular';
1212
import { AutocompleteBasicComponent, AutocompletePipeStartsWith } from './autocomplete/autocomplete/autocomplete.component';
1313
import { MovieComponent } from './autocomplete/movie/movie.component';
@@ -195,7 +195,11 @@ import { IconButtonStylingComponent } from './icon-button/icon-button-styling/ic
195195
IgcFormsModule,
196196
IgxChipsModule,
197197
IgxTreeModule,
198-
IgxTreeGridModule
198+
IgxTreeGridModule,
199+
IgxSliderModule,
200+
IgxDateRangePickerModule,
201+
IgxCalendarModule,
202+
IgxCardModule
199203
]
200204
})
201205
export class DataEntriesModule { }

‎src/app/how-to/reactive-forms/reactive-forms.component.html‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,32 @@ <h4>Book your movie ticket</h4>
1515
</ng-template>
1616
</igx-select>
1717
<igx-input-group>
18-
<input igxInput name="fullName" type="text" formControlName="fullName" />
18+
<input igxInput name="fullName" type="text" formControlName="fullName" aria-describedby="invalid-name" />
1919
<label igxLabel for="fullName">Full Name</label>
2020
<igx-suffix>
2121
<igx-icon>person</igx-icon>
2222
</igx-suffix>
23+
<igx-hint *ngIf="fullName.touched && fullName.errors?.required">Fullname is required</igx-hint>
24+
<igx-hint id="invalid-name" *ngIf="fullName.touched && fullName.errors?.pattern">Please enter a valid name.</igx-hint>
2325
</igx-input-group>
2426
<igx-input-group>
2527
<igx-prefix>+359</igx-prefix>
2628
<label igxLabel for="phone">Phone</label>
27-
<input igxInput name="phone" type="tel" formControlName="phone" />
29+
<input igxInput name="phone" type="number" formControlName="phone" />
2830
<igx-suffix>
2931
<igx-icon>phone</igx-icon>
3032
</igx-suffix>
3133
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
34+
<igx-hint *ngIf="phone.touched && phone.invalid">Phone number is required</igx-hint>
3235
</igx-input-group>
3336
<igx-input-group>
3437
<label igxLabel for="email">Email address</label>
3538
<input igxInput name="email" type="email" formControlName="email" />
3639
<igx-suffix>
3740
<igx-icon>email</igx-icon>
3841
</igx-suffix>
42+
<igx-hint *ngIf="email.touched && email.invalid">Email is required</igx-hint>
43+
<igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
3944
</igx-input-group>
4045
<igx-combo #combo1 class="input-container" [itemsMaxHeight]="130" [data]="genres" [valueKey]="'type'"
4146
[displayKey]="'type'" type="line" formControlName="genres" placeholder="Select your favorite genres"
@@ -51,6 +56,34 @@ <h4>Book your movie ticket</h4>
5156
<igx-icon>access_time</igx-icon>
5257
</igx-picker-toggle>
5358
</igx-time-picker>
59+
<igc-rating size="large" name="rating" class="user-input" formControlName="rating">
60+
<label igxLabel>Rate the movie</label>
61+
</igc-rating>
62+
<igx-checkbox labelPosition="after" class="user-input" name="checkbox" formControlName="checkbox">
63+
Agree to the terms of use.
64+
</igx-checkbox>
65+
<igx-radio-group value="1" class="user-input" formControlName="radio">
66+
<igx-radio value="2d" class="radio">
67+
2D Movie
68+
</igx-radio>
69+
<igx-radio value="3d" class="radio">
70+
3D Movie
71+
</igx-radio>
72+
</igx-radio-group>
73+
<igx-switch name="switch" formControlName="switch">
74+
Subtitles for the Deaf or Hard-of-Hearing (SDH)
75+
</igx-switch>
76+
<igx-date-range-picker name="range" formControlName="range">
77+
<label igxLabel>Pick suitable date range - for avaliable movies</label>
78+
</igx-date-range-picker>
79+
<igx-slider name="slider" formControlName="slider" id="slider" type="range">
80+
</igx-slider>
81+
<article class="calendar-wrapper">
82+
<igx-calendar selection="multi" name="calendar" formControlName="calendar"></igx-calendar>
83+
</article>
84+
<igx-card>
85+
<igx-month-picker #monthPicker name="month" formControlName="month"></igx-month-picker>
86+
</igx-card>
5487
<button igxButton="contained" igxRipple type="submit" [disabled]="!user.valid">Book</button>
5588
</div>
5689
</form>

‎src/app/how-to/reactive-forms/reactive-forms.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,8 @@
1616
h4 {
1717
margin-top: 0;
1818
}
19+
20+
igx-card, article {
21+
max-width: 400px;
22+
margin: 20px;
23+
}

‎src/app/how-to/reactive-forms/reactive-forms.component.ts‎

Lines changed: 52 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,62 @@
11
import { Component } from '@angular/core';
2-
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
2+
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
3+
import { DateRange, IRangeSliderValue } from 'igniteui-angular';
34

5+
6+
export interface User{
7+
date: FormControl<string |Date | null>,
8+
time: FormControl<string| Date| null>,
9+
email: FormControl<string | null>,
10+
fullName: FormControl<string | null>,
11+
movie: FormControl<string | null>,
12+
phone: FormControl<number | null>,
13+
rating: FormControl<number | null>,
14+
checkbox: FormControl<boolean | null>,
15+
radio: FormControl,
16+
switch: FormControl<boolean | null>,
17+
range: FormControl<DateRange|null>,
18+
slider: FormControl<IRangeSliderValue|null>
19+
calendar: FormControl<string |Date|null>
20+
month: FormControl<string| Date |null>
21+
genres: FormControl<string[] | null>
22+
}
423
@Component({
524
selector: 'app-reactive-form',
625
styleUrls: ['./reactive-forms.component.scss'],
726
templateUrl: './reactive-forms.component.html'
827
})
928
export class ReactiveFormsSampleComponent {
1029
public genres = [];
11-
public user: FormGroup;
1230
public minTime = '06:15:30';
1331
public maxTime = '09:15:30';
32+
public minValue = '0';
33+
public maxValue = '100';
1434
public minDate = new Date();
1535
public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14));
36+
public user: FormGroup<User>;
1637

17-
18-
constructor(fb: FormBuilder) {
19-
this.user = fb.group({
20-
date: ['', Validators.required],
21-
time: ['', Validators.required],
22-
email: ['', Validators.required],
23-
fullName: ['', Validators.required],
24-
genres: [''],
25-
movie: ['', Validators.required],
26-
phone: ['']
38+
constructor() {
39+
this.user = new FormGroup<User>({
40+
date: new FormControl('', Validators.required),
41+
time: new FormControl('', Validators.required),
42+
email: new FormControl('', [Validators.required, Validators.email]),
43+
fullName: new FormControl('', [Validators.required, Validators.pattern(/^[\p{L}\p{M}'\- ]+$/u)]),
44+
movie: new FormControl('', Validators.required),
45+
phone: new FormControl(null,Validators.required),
46+
rating: new FormControl(2, Validators.required),
47+
checkbox: new FormControl(true,Validators.required),
48+
radio: new FormControl(''),
49+
switch: new FormControl(false),
50+
range: new FormControl({ start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5))}),
51+
slider: new FormControl({lower: 5, upper: 30}),
52+
calendar: new FormControl(null),
53+
month: new FormControl(null),
54+
genres: new FormControl(['Action','Adventure','Comedy'])
2755
});
28-
2956
this.genres = [
3057
{ type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] },
3158
{ type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] },
32-
{
33-
type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri',
34-
'Untouchable', '3 idiots']
35-
},
59+
{type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri','Untouchable', '3 idiots']},
3660
{ type: 'Crime', movies: ['Training Day', 'Heat', 'American Gangster'] },
3761
{ type: 'Drama', movies: ['Fight Club', 'A Beautiful Mind', 'Good Will Hunting', 'City of God'] },
3862
{ type: 'Biography', movies: ['Amadeus', 'Bohemian Rhapsody'] },
@@ -43,6 +67,17 @@ export class ReactiveFormsSampleComponent {
4367
{ type: 'Thriller', movies: ['The Usual Suspects'] },
4468
{ type: 'Western', movies: ['Django Unchained'] }
4569
];
70+
71+
}
72+
73+
public get email() {
74+
return this.user.get('email');
75+
}
76+
public get phone() {
77+
return this.user.get('phone');
78+
}
79+
public get fullName() {
80+
return this.user.get('fullName');
4681
}
4782

4883
public onSubmit() {

0 commit comments

Comments
 (0)