File ClientApp/src/app/vehicule-form/vehicule-form.component.html changed (mode: 100644) (index 30ddf80..cea0db6) |
1 |
1 |
<h1>New Vehicle</h1> |
<h1>New Vehicle</h1> |
|
2 |
|
<p> |
|
3 |
|
For debug |
|
4 |
|
{{vehicle | json }} |
|
5 |
|
</p> |
2 |
6 |
<form> |
<form> |
3 |
7 |
<div class="form-group"> |
<div class="form-group"> |
4 |
8 |
<label for="make">Make</label> |
<label for="make">Make</label> |
5 |
|
<select name="make" id="make" class="form-control" (change)="onMakeChange()" [(ngModel)]="vehicle.make"> |
|
|
9 |
|
<select name="makeId" id="make" class="form-control" (change)="onMakeChange()" [(ngModel)]="vehicle.makeId"> |
6 |
10 |
<option value=""></option> |
<option value=""></option> |
7 |
11 |
<option *ngFor="let m of makes" value="{{m.id}}">{{m.name}}</option> |
<option *ngFor="let m of makes" value="{{m.id}}">{{m.name}}</option> |
8 |
12 |
</select> |
</select> |
9 |
13 |
</div> |
</div> |
10 |
14 |
<div class="form-group"> |
<div class="form-group"> |
11 |
15 |
<label for="model">Model</label> |
<label for="model">Model</label> |
12 |
|
<select id="model" class="form-control"> |
|
|
16 |
|
<select id="model" class="form-control" [(ngModel)]="vehicle.modelId" name="modelId"> |
13 |
17 |
<option *ngFor="let m of models" value="{{m.id}}">{{m.name}}</option> |
<option *ngFor="let m of models" value="{{m.id}}">{{m.name}}</option> |
14 |
18 |
</select> |
</select> |
15 |
19 |
</div> |
</div> |
16 |
20 |
<p>Is this vehicle registered?</p> |
<p>Is this vehicle registered?</p> |
17 |
21 |
<div class="radio-inline"> |
<div class="radio-inline"> |
18 |
22 |
<label for="registered"> |
<label for="registered"> |
19 |
|
<input type="radio" name="isResgistered" value="true" id="registered">Yes |
|
|
23 |
|
<input type="radio" name="isResgistered" value="true" id="registered" [(ngModel)]="vehicle.isResgistered">Yes |
20 |
24 |
</label> |
</label> |
21 |
25 |
</div> |
</div> |
22 |
26 |
<div class="radio-inline"> |
<div class="radio-inline"> |
23 |
27 |
<label for="notRegistered"> |
<label for="notRegistered"> |
24 |
|
<input type="radio" name="isResgistered" value="false" id="notRegistered">No |
|
|
28 |
|
<input type="radio" name="isResgistered" value="false" id="notRegistered" [(ngModel)]="vehicle.isResgistered">No |
25 |
29 |
</label> |
</label> |
26 |
30 |
</div> |
</div> |
27 |
31 |
<h2>Features</h2> |
<h2>Features</h2> |
28 |
32 |
<div *ngFor="let f of features" class="form-check"> |
<div *ngFor="let f of features" class="form-check"> |
29 |
33 |
<label class="form-check-label" for="feature{{f.id}}"> |
<label class="form-check-label" for="feature{{f.id}}"> |
30 |
|
<input class="form-check-input" type="checkbox" value="{{f.id}}" id="feature{{f.id}}"> |
|
|
34 |
|
<input class="form-check-input" type="checkbox" value="{{f.id}}" id="feature{{f.id}}" (change)="onFeatureToggle(f.id, $event)"> |
31 |
35 |
{{f.name}} |
{{f.name}} |
32 |
36 |
</label> |
</label> |
33 |
37 |
</div> |
</div> |
34 |
38 |
<h2>Contact</h2> |
<h2>Contact</h2> |
35 |
39 |
<div class="form-group"> |
<div class="form-group"> |
36 |
40 |
<label for="contactName">Name</label> |
<label for="contactName">Name</label> |
37 |
|
<input id="contactName" type="text" class="form-control"> |
|
|
41 |
|
<input id="contactName" type="text" class="form-control" [(ngModel)]="vehicle.contact.name" name="contacName"> |
38 |
42 |
</div> |
</div> |
39 |
43 |
<div class="form-group"> |
<div class="form-group"> |
40 |
44 |
<label for="contactPhone">Phone</label> |
<label for="contactPhone">Phone</label> |
41 |
|
<input id="contactPhone" type="text" class="form-control"> |
|
|
45 |
|
<input id="contactPhone" type="text" class="form-control" [(ngModel)]="vehicle.contact.phone" name="contacPhone"> |
42 |
46 |
</div> |
</div> |
43 |
47 |
<div class="form-group"> |
<div class="form-group"> |
44 |
48 |
<label for="contactEmail">Email</label> |
<label for="contactEmail">Email</label> |
45 |
|
<input id="contactEmail" type="text" class="form-control"> |
|
|
49 |
|
<input id="contactEmail" type="text" class="form-control" [(ngModel)]="vehicle.contact.email" name="contacEmail"> |
46 |
50 |
</div> |
</div> |
47 |
51 |
<button class="btn btn-primary">Save</button> |
<button class="btn btn-primary">Save</button> |
48 |
52 |
</form> |
</form> |
File ClientApp/src/app/vehicule-form/vehicule-form.component.ts changed (mode: 100644) (index 9cfa53b..c29c270) |
... |
... |
import { Component, OnInit } from '@angular/core'; |
8 |
8 |
}) |
}) |
9 |
9 |
export class VehiculeFormComponent implements OnInit { |
export class VehiculeFormComponent implements OnInit { |
10 |
10 |
makes: any[]; |
makes: any[]; |
11 |
|
vehicle: any = {}; |
|
|
11 |
|
vehicle: any = { |
|
12 |
|
features: [], |
|
13 |
|
contact:{} |
|
14 |
|
}; |
12 |
15 |
models: any[]; |
models: any[]; |
13 |
16 |
features: any[]; |
features: any[]; |
14 |
17 |
|
|
|
... |
... |
export class VehiculeFormComponent implements OnInit { |
23 |
26 |
} |
} |
24 |
27 |
|
|
25 |
28 |
onMakeChange(){ |
onMakeChange(){ |
26 |
|
var selectedMake = this.makes.find(m => m.id == this.vehicle.make); |
|
|
29 |
|
var selectedMake = this.makes.find(m => m.id == this.vehicle.makeId); |
27 |
30 |
this.models = selectedMake? selectedMake.models : []; |
this.models = selectedMake? selectedMake.models : []; |
|
31 |
|
delete this.vehicle.modelId; |
|
32 |
|
} |
|
33 |
|
|
|
34 |
|
onFeatureToggle(featureId, $event){ |
|
35 |
|
if ($event.target.checked) { |
|
36 |
|
this.vehicle.features.push(featureId); |
|
37 |
|
} |
|
38 |
|
else { |
|
39 |
|
var index = this.vehicle.features.indexOf(featureId); |
|
40 |
|
this.vehicle.features.splice(index, 1); |
|
41 |
|
} |
28 |
42 |
} |
} |
29 |
43 |
} |
} |