1 | <mat-stepper linear #stepper>
|
---|
2 | <mat-step [stepControl]="firstFormGroup" [editable]="isEditable" [completed]="isCompleted">
|
---|
3 | <form [formGroup]="firstFormGroup">
|
---|
4 | <ng-template matStepLabel>Location properties</ng-template>
|
---|
5 | <mat-form-field appearance="fill">
|
---|
6 | <mat-label>Name</mat-label>
|
---|
7 | <input matInput [(ngModel)]="name" formControlName="name" required>
|
---|
8 | </mat-form-field>
|
---|
9 | <label></label>
|
---|
10 | <mat-form-field appearance="fill">
|
---|
11 | <mat-label>Description</mat-label>
|
---|
12 | <input matInput [(ngModel)]="desc" formControlName="desc" required>
|
---|
13 | </mat-form-field>
|
---|
14 | <label></label>
|
---|
15 | <mat-form-field appearance="fill">
|
---|
16 | <mat-label>Address</mat-label>
|
---|
17 | <input matInput [(ngModel)]="address" formControlName="address" required>
|
---|
18 | </mat-form-field>
|
---|
19 |
|
---|
20 | <mat-form-field appearance="fill">
|
---|
21 | <mat-label>Duration</mat-label>
|
---|
22 | <input matInput [(ngModel)]="duration" type="number" formControlName="duration" required>
|
---|
23 | </mat-form-field>
|
---|
24 |
|
---|
25 | <mat-form-field appearance="fill">
|
---|
26 | <mat-label>Trivia</mat-label>
|
---|
27 | <input matInput [(ngModel)]="trivia" formControlName="trivia" required>
|
---|
28 | </mat-form-field>
|
---|
29 |
|
---|
30 | <mat-form-field appearance="fill">
|
---|
31 | <mat-label>Priority</mat-label>
|
---|
32 | <mat-select [(ngModel)]="priority" name="priority" [ngModelOptions]="{standalone: true}" >
|
---|
33 | <mat-option *ngFor="let priority of priorities" [value]="priority.value">
|
---|
34 | {{priority.viewValue}}
|
---|
35 | </mat-option>
|
---|
36 | </mat-select>
|
---|
37 | </mat-form-field>
|
---|
38 |
|
---|
39 | <label>
|
---|
40 | <h5>Please select a city</h5>
|
---|
41 | </label>
|
---|
42 | <mat-form-field appearance="fill" class="example-full-width">
|
---|
43 | <mat-label>Please select a city</mat-label>
|
---|
44 | <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city" [ngModelOptions]="{standalone: true}">
|
---|
45 | <mat-option [value]="city.id" *ngFor="let city of cities"> {{city.name}}</mat-option>
|
---|
46 | </mat-select>
|
---|
47 | </mat-form-field>
|
---|
48 |
|
---|
49 | <label>
|
---|
50 | <h5>Please select a region</h5>
|
---|
51 | </label>
|
---|
52 | <mat-form-field appearance="fill" class="example-full-width">
|
---|
53 | <mat-label>Please select a region</mat-label>
|
---|
54 | <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region" [ngModelOptions]="{standalone: true}">
|
---|
55 | <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
|
---|
56 | </mat-option>
|
---|
57 | </mat-select>
|
---|
58 | </mat-form-field>
|
---|
59 |
|
---|
60 | <p-fileUpload #fubauto mode="basic" name="demo[]" url="" chooseLabel="Image"></p-fileUpload>
|
---|
61 |
|
---|
62 | <div>
|
---|
63 | <button mat-button matStepperNext (click)="submitLocation()">Next</button>
|
---|
64 | </div>
|
---|
65 | </form>
|
---|
66 | </mat-step>
|
---|
67 | <mat-step [stepControl]="secondFormGroup" [editable]="isEditable" [completed]="isCompletedSecond">
|
---|
68 | <form [formGroup]="secondFormGroup">
|
---|
69 | <ng-template matStepLabel>Add companion for the location</ng-template>
|
---|
70 | <mat-form-field appearance="fill">
|
---|
71 | <mat-label>Companion</mat-label>
|
---|
72 | <mat-select [formControl]="companionForm" multiple>
|
---|
73 | <mat-select-trigger>
|
---|
74 | {{companionForm.value ? companionForm.value[0] : ''}}
|
---|
75 | <span *ngIf="companionForm.value?.length > 1" class="example-additional-selection">
|
---|
76 | (+{{companionForm.value.length - 1}} {{companionForm.value?.length === 2 ? 'other' : 'others'}})
|
---|
77 | </span>
|
---|
78 | </mat-select-trigger>
|
---|
79 | <mat-option *ngFor="let companion of companions" [value]="companion">{{companion.type}}</mat-option>
|
---|
80 | </mat-select>
|
---|
81 | </mat-form-field>
|
---|
82 | <div>
|
---|
83 | <button mat-button matStepperNext (click)="onClickSecondForm()">Next</button>
|
---|
84 | </div>
|
---|
85 | </form>
|
---|
86 | </mat-step>
|
---|
87 |
|
---|
88 | <mat-step [stepControl]="thirdFormGroup" [editable]="isEditable">
|
---|
89 | <form [formGroup]="thirdFormGroup">
|
---|
90 | <ng-template matStepLabel>Add categories for the location</ng-template>
|
---|
91 | <mat-chip-list selectable multiple>
|
---|
92 | <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
|
---|
93 | [ngClass]="{'yellow' : toggle}" name="chips">
|
---|
94 | <mat-icon *ngIf="!c.selected">check</mat-icon>
|
---|
95 | {{category.name}}
|
---|
96 | </mat-chip>
|
---|
97 | </mat-chip-list>
|
---|
98 | <div>
|
---|
99 | <button mat-button matStepperNext>Next</button>
|
---|
100 | </div>
|
---|
101 | </form>
|
---|
102 | </mat-step>
|
---|
103 | <mat-step>
|
---|
104 | <ng-template matStepLabel>Done</ng-template>
|
---|
105 | <p>You are now done.</p>
|
---|
106 | <div>
|
---|
107 | <button mat-button (click)="stepper.reset()">Reset</button>
|
---|
108 | </div>
|
---|
109 | </mat-step>
|
---|
110 | </mat-stepper> |
---|