File ClientApp/src/app/vehicule-form/vehicule-form.component.html changed (mode: 100644) (index d015759..bff9f69) |
1 |
1 |
<h1>New Vehicle</h1> |
<h1>New Vehicle</h1> |
2 |
|
<p> |
|
3 |
|
For debug |
|
4 |
|
{{vehicle | json }} |
|
5 |
|
</p> |
|
6 |
|
<form (ngSubmit)="submit()"> |
|
|
2 |
|
<form #f="ngForm" (ngSubmit)="submit()"> |
7 |
3 |
<div class="form-group"> |
<div class="form-group"> |
8 |
4 |
<label for="make">Make</label> |
<label for="make">Make</label> |
9 |
|
<select name="makeId" id="make" class="form-control" (change)="onMakeChange()" [(ngModel)]="vehicle.makeId"> |
|
|
5 |
|
<select name="makeId" id="make" class="form-control" |
|
6 |
|
(change)="onMakeChange()" [(ngModel)]="vehicle.makeId" |
|
7 |
|
required #make="ngModel"> |
10 |
8 |
<option value=""></option> |
<option value=""></option> |
11 |
9 |
<option *ngFor="let m of makes" value="{{m.id}}">{{m.name}}</option> |
<option *ngFor="let m of makes" value="{{m.id}}">{{m.name}}</option> |
12 |
10 |
</select> |
</select> |
|
11 |
|
<div class="alert alert-danger" *ngIf="make.touched && !make.valid">Please specify the make.</div> |
13 |
12 |
</div> |
</div> |
14 |
13 |
<div class="form-group"> |
<div class="form-group"> |
15 |
14 |
<label for="model">Model</label> |
<label for="model">Model</label> |
16 |
|
<select id="model" class="form-control" [(ngModel)]="vehicle.modelId" name="modelId"> |
|
|
15 |
|
<select id="model" class="form-control" [(ngModel)]="vehicle.modelId" name="modelId" |
|
16 |
|
required #model="ngModel"> |
17 |
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> |
18 |
18 |
</select> |
</select> |
|
19 |
|
<div class="alert alert-danger" *ngIf="model.touched && !model.valid">Please specify the model.</div> |
19 |
20 |
</div> |
</div> |
20 |
21 |
<p>Is this vehicle registered?</p> |
<p>Is this vehicle registered?</p> |
21 |
22 |
<div class="radio-inline"> |
<div class="radio-inline"> |
|
38 |
39 |
<h2>Contact</h2> |
<h2>Contact</h2> |
39 |
40 |
<div class="form-group"> |
<div class="form-group"> |
40 |
41 |
<label for="contactName">Name</label> |
<label for="contactName">Name</label> |
41 |
|
<input id="contactName" type="text" class="form-control" [(ngModel)]="vehicle.contact.name" name="contacName"> |
|
|
42 |
|
<input id="contactName" type="text" class="form-control" [(ngModel)]="vehicle.contact.name" |
|
43 |
|
name="contacName" required #contactName="ngModel"> |
|
44 |
|
<div class="alert alert-danger" *ngIf="contactName.touched && !contactName.valid">Please specify the contact name.</div> |
42 |
45 |
</div> |
</div> |
43 |
46 |
<div class="form-group"> |
<div class="form-group"> |
44 |
47 |
<label for="contactPhone">Phone</label> |
<label for="contactPhone">Phone</label> |
45 |
|
<input id="contactPhone" type="text" class="form-control" [(ngModel)]="vehicle.contact.phone" name="contacPhone"> |
|
|
48 |
|
<input id="contactPhone" type="text" class="form-control" [(ngModel)]="vehicle.contact.phone" |
|
49 |
|
name="contactPhone" required #contactPhone="ngModel"> |
|
50 |
|
<div class="alert alert-danger" *ngIf="contactPhone.touched && !contactPhone.valid">Please specify the contact phone.</div> |
46 |
51 |
</div> |
</div> |
47 |
52 |
<div class="form-group"> |
<div class="form-group"> |
48 |
53 |
<label for="contactEmail">Email</label> |
<label for="contactEmail">Email</label> |
49 |
54 |
<input id="contactEmail" type="text" class="form-control" [(ngModel)]="vehicle.contact.email" name="contacEmail"> |
<input id="contactEmail" type="text" class="form-control" [(ngModel)]="vehicle.contact.email" name="contacEmail"> |
50 |
55 |
</div> |
</div> |
51 |
|
<button class="btn btn-primary">Save</button> |
|
|
56 |
|
<button class="btn btn-primary" [disabled]="!f.valid" >Save</button> |
52 |
57 |
</form> |
</form> |