Style des formulaires d'ajout

This commit is contained in:
Sébastien André
2020-03-31 13:30:51 +02:00
parent 2b7926d99b
commit 84b2947175
12 changed files with 148 additions and 102 deletions

View File

@@ -1,32 +1,32 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<div>
<p class="form-group">
<label for="name">Name of gear</label>
<input id="name" type="text" formControlName="name">
</div>
<div>
<input id="name" type="text" formControlName="name" class="form-control">
</p>
<p class="form-group">
<label for="manufacturer">Manufacturer</label>
<input id="manufacturer" type="text" formControlName="manufacturer">
</div>
<div>
<input id="manufacturer" type="text" formControlName="manufacturer" class="form-control">
</p>
<p class="form-group">
<label for="minSize">Min size of canopy</label>
<input id="minSize" type="text" formControlName="minSize">
</div>
<div>
<input id="minSize" type="text" formControlName="minSize" class="form-control">
</p>
<p class="form-group">
<label for="maxSize">Max size of canopy</label>
<input id="maxSize" type="text" formControlName="maxSize">
</div>
<div>
<input id="maxSize" type="text" formControlName="maxSize" class="form-control">
</p>
<p class="form-group">
<label for="aad">AAD system</label>
<input id="aad" type="text" formControlName="aad">
</div>
<div>
<input id="aad" type="text" formControlName="aad" class="form-control">
</p>
<p class="form-group">
<label for="mainCanopy">Main Canopy</label>
<input id="mainCanopy" type="text" formControlName="mainCanopy">
</div>
<div>
<input id="mainCanopy" type="text" formControlName="mainCanopy" class="form-control">
</p>
<p class="form-group">
<label for="reserveCanopy">Reserve canopy</label>
<input id="reserveCanopy" type="text" formControlName="reserveCanopy">
</div>
<input id="reserveCanopy" type="text" formControlName="reserveCanopy" class="form-control">
</p>
<button class="button" type="submit" class="btn btn-primary">Add</button>
</form>

View File

@@ -1,33 +1,50 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ServiceComm } from '../../services/service-comm.service';
import { GearService } from '../../services/gear.service';
import { AddAction } from '../../models/add-action.enum';
import { Component, OnInit } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { ServiceComm } from "../../services/service-comm.service";
import { GearService } from "../../services/gear.service";
import { AddAction } from "../../models/add-action.enum";
@Component({
selector: 'app-new-gear',
templateUrl: './new-gear.component.html',
styleUrls: ['./new-gear.component.css']
selector: "app-new-gear",
templateUrl: "./new-gear.component.html",
styleUrls: ["./new-gear.component.css"]
})
export class NewGearComponent implements OnInit {
public addForm: FormGroup;
constructor(private serviceComm: ServiceComm, private serviceApi: GearService) {
constructor(
private serviceComm: ServiceComm,
private serviceApi: GearService
) {
this.addForm = new FormGroup({
name: new FormControl('', Validators.required),
manufacturer: new FormControl('', Validators.required),
minSize: new FormControl('', Validators.required),
maxSize: new FormControl('', Validators.required),
aad: new FormControl('', Validators.required),
mainCanopy: new FormControl('', Validators.required),
reserveCanopy: new FormControl('', Validators.required),
name: new FormControl("", Validators.required),
manufacturer: new FormControl("", Validators.required),
minSize: new FormControl("", [
Validators.required,
Validators.min(60),
Validators.max(320)
]),
maxSize: new FormControl("", [
Validators.required,
Validators.min(60),
Validators.max(320)
]),
aad: new FormControl("", Validators.required),
mainCanopy: new FormControl("", [
Validators.required,
Validators.min(60),
Validators.max(320)
]),
reserveCanopy: new FormControl("", [
Validators.required,
Validators.min(60),
Validators.max(320)
])
});
}
ngOnInit() {
}
ngOnInit() {}
onSubmit(formData) {
this.serviceApi.AddGear(
@@ -41,7 +58,6 @@ export class NewGearComponent implements OnInit {
);
this.serviceComm.RefreshData(AddAction.Gear);
this.addForm.reset();
}
}