sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Autcomplete ajouté sur les dropdown list

Browse Source 
du formulaire d'ajout de sauts
This commit is contained in:
Sébastien André
2019-11-25 11:20:50 +01:00
parent ec5fac8826
commit 41eecd2a68
3 changed files with 99 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
View File

@@ -1,38 +1,57 @@
<form class="example-container" (ngSubmit)="onFormSubmit()">
<mat-form-field>
<mat-label>Choose the jump type</mat-label>
<mat-select [(ngModel)]="selectedJumpType" name="selectedJumpType">
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType.id">
<input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
<mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
{{jumpType.name}}
</mat-option>
</mat-select>
</mat-autocomplete>
<button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedJumpType=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<mat-label>Choose the aircraft</mat-label>
<mat-select [(ngModel)]="selectedAircraft" name="selectedAircraft">
<mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft.id">
<input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft" name="selectedAircraft">
<mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
{{aircraft.name}}
</mat-option>
</mat-select>
</mat-autocomplete>
<button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedAircraft=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<mat-label>Choose the DZ</mat-label>
<mat-select [(ngModel)]="selectedDz" name="selectedDz">
<mat-option *ngFor="let dropZone of listOfDropZone" [value]="dropZone.id">
<input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz" name="selectedDz">
<mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let dropZone of listOfDropZone" [value]="dropZone">
{{dropZone.name}}
</mat-option>
</mat-select>
</mat-autocomplete>
<button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<mat-label>Choose the used gear</mat-label>
<mat-select [(ngModel)]="selectedGear" name="selectedGear">
<mat-option *ngFor="let gear of listOfGear" [value]="gear.id">
<input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear">
<mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let gear of listOfGear" [value]="gear">
{{gear.name}}
</mat-option>
</mat-select>
</mat-autocomplete>
<button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedGear=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">With a cutaway ?</mat-checkbox>