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,23 +1,27 @@
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
<div>
<p class="form-group">
<label for="dzName">Dropzone name</label>
<input id="dzName" type="text" formControlName="dzName">
</div>
<div>
<input id="dzName" type="text" formControlName="dzName" class="form-control">
</p>
<p class="form-group">
<label for="gps">GPS</label>
<input id="gps" type="text" formControlName="gps">
</div>
<div>
<input id="gps" type="text" formControlName="gps" class="form-control">
</p>
<p class="form-group">
<label for="address">Address</label>
<textarea id="address" formControlName="address" placeholder="Address of the DZ"></textarea>
</div>
<div>
<textarea id="address" formControlName="address" placeholder="Address of the DZ" class="form-control"></textarea>
</p>
<p class="form-group">
<label for="contactMail">Mail of contact</label>
<input id="contactMail" type="email" formControlName="contactMail">
</div>
<div>
<label for="type">DZ or/and tunnel</label>
<input id="type" type="text" formControlName="type">
</div>
<input id="contactMail" type="text" formControlName="contactMail" class="form-control">
</p>
<p class="form-group">
<label for="isDz">Is a dropzone</label>
<input id="isDz" type="checkbox" formControlName="isDz" class="form-control">
</p>
<p class="form-group">
<label for="isTunnel">Is a tunnel</label>
<input id="isTunnel" type="checkbox" formControlName="isTunnel" class="form-control">
</p>
<button class="button" type="submit" class="btn btn-primary">Add</button>
</form>

View File

@@ -1,31 +1,37 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { AddAction } from "../../models/add-action.enum";
import { ServiceComm } from "../../services/service-comm.service";
@Component({
selector: 'app-new-drop-zone',
templateUrl: './new-drop-zone.component.html',
styleUrls: ['./new-drop-zone.component.css']
selector: "app-new-drop-zone",
templateUrl: "./new-drop-zone.component.html",
styleUrls: ["./new-drop-zone.component.css"]
})
export class NewDropZoneComponent implements OnInit {
public addForm: FormGroup;
constructor() {
constructor(private serviceComm: ServiceComm) {
this.addForm = new FormGroup({
dzName: new FormControl('', Validators.required),
gps: new FormControl('x.x,y.y', Validators.required),
address: new FormControl('', Validators.required),
contactMail: new FormControl('tot@toto.fr', [Validators.required, Validators.pattern('\\w+@\\w+\.\\w+')]),
type: new FormControl('dz, tunel', Validators.required)
dzName: new FormControl("", Validators.required),
gps: new FormControl("x.x,y.y", [
Validators.required,
Validators.pattern("d+.d+,d+.d+")
]),
address: new FormControl("", Validators.required),
contactMail: new FormControl("", [Validators.required, Validators.email]),
isDz: new FormControl(true),
isTunnel: new FormControl(false)
});
}
ngOnInit() {
}
ngOnInit() {}
onSubmit(formData) {
console.log(formData.status);
console.warn('New data : ', formData);
console.warn("New data : ", formData);
this.serviceComm.RefreshData(AddAction.Gear);
this.addForm.reset();
}
}