Here what i see when inspecting in the front during submitting the data:
Here below the code i'am using in the html page:
<div>
<table>
<tr>
<td>
<h2>Nouveau Client </h2>
</td>
<td>
<mat-slide-toggle (click) = "isParticulier=!isParticulier" color="primary" style ="margin-left: 50px;"class="example-margin" >Société</mat-slide-toggle>
</td>
</tr>
</table>
<div>
<div class ="col-md-6 offset-md-3" style ="margin-top: 10px; margin-left: 10px;" >
<form (ngSubmit)="onSubmit()">
<mat-divider></mat-divider>
<table class="input_table" >
<tr>
<td>
<mat-form-field class="input_field" >
<mat-label>Code</mat-label>
<input readonly matInput required id ="next_Id_CLIENT"
ngDefaultControl [(ngModel)]= "next_Id_CLIENT" name ="next_Id_CLIENT">
</mat-form-field>
</td>
<td>
<mat-form-field class="input_field" >
<mat-label>Nom Complet</mat-label>
<input matInput [(ngModel)]= "client.nom_COMPLET" name ="nom_COMPLET">
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field class="input_field">
<mat-label>Adresse</mat-label>
<input matInput [(ngModel)]= "client.adresse" name ="adresse">
</mat-form-field>
</td>
<td>
<mat-form-field class="input_field">
<mat-label>Num. Téléphone1</mat-label>
<input type="number" matInput [(ngModel)]= "client.tel_PRINCIPAL" name ="tel_PRINCIPAL">
</mat-form-field>
</td>
</tr>
<tr *ngIf="!isParticulier">
<td>
<mat-form-field class="input_field" >
<mat-label>Société</mat-label>
<input matInput [(ngModel)]= "client.societe" name ="societe">
</mat-form-field>
</td>
<td>
<mat-form-field class="input_field">
<mat-label>Matricule Fiscale</mat-label>
<input matInput [(ngModel)]= "client.matricule_FISCALE" name ="matricule_FISCALE">
</mat-form-field>
</td>
</tr>
<tr *ngIf="!isParticulier">
<td>
<mat-form-field class="input_field">
<mat-label>Point de Contact</mat-label>
<input matInput [(ngModel)]= "client.point_DE_CONTACT" name ="point_DE_CONTACT">
</mat-form-field>
</td>
<td>
<mat-form-field class="input_field">
<mat-label>Num. Téléphone2</mat-label>
<input type="number" matInput [(ngModel)]= "client.tel_SECONDAIRE" name ="tel_SECONDAIRE">
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field class="input_field">
<input matInput [(ngModel)]= "client.date_DE_CREATION " name ="date_DE_CREATION"
[ngxMatDatetimePicker]="picker" placeholder="Date de Création" [formControl]="dateControl"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi"
[color]="color" [enableMeridian]="enableMeridian">
</ngx-mat-datetime-picker>
</mat-form-field>
<!--mat-form-field class="input_field">
<mat-label>Date de Création</mat-label>
<input matInput [(ngModel)]= "client.date_DE_CREATION" name ="date_DE_CREATION">
</mat-form-field-->
</td>
<td>
<mat-form-field class="input_field">
<mat-label>Crée par</mat-label>
<input matInput [(ngModel)]= "client.cree_PAR" name ="cree_PAR">
</mat-form-field>
</td>
</tr>
</table>
<mat-divider></mat-divider>
<div class="example-button-row" >
<button [disabled]="saved" mat-raised-button type="submit" color="primary" style ="margin-right: 10px;" >Enregistrer</button>
<button mat-raised-button (click)="goToListeClients()">Retour</button>
</div>
</form>
</div >
<mat-divider style ="margin-top: 10ox;"></mat-divider>
</div>
The code below for the ts file:
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ThemePalette } from '@angular/material/core';
import { Router } from '@angular/router';
import { Client } from '../client';
import { ClientserviceService } from '../clientservice.service';
@Component({
selector: 'app-nouveau-client',
templateUrl: './nouveau-client.component.html',
styleUrls: ['./nouveau-client.component.css']
})
export class NouveauClientComponent implements OnInit {
@ViewChild('picker') picker: any;
public disabled = false;
public showSpinners = true;
public showSeconds = true;
public touchUi = false;
public enableMeridian = false;
public minDate!: moment.Moment;
public maxDate!: moment.Moment;
public stepHour = 1;
public stepMinute = 1;
public stepSecond = 1;
public color: ThemePalette = 'primary';
dateForm! : FormGroup;
public options = [
{ value: true, label: 'True' },
{ value: false, label: 'False' }
];
public listColors = ['primary', 'accent', 'warn'];
public stepHours = [1, 2, 3, 4, 5];
public stepMinutes = [1, 5, 10, 15, 20, 25];
public stepSeconds = [1, 5, 10, 15, 20, 25];
dateControl = new FormControl;
next_Id_CLIENT : number |undefined;
client = new Client;
saved = false;
isParticulier = true;
constructor(private router: Router ,private clientservice : ClientserviceService) { }
getNextIdClient(){
this.clientservice.getNextIdClient().subscribe((data : any[])=>{this.next_Id_CLIENT = data as any ; console.log(this.next_Id_CLIENT)})
}
goToListeClients(){
this.router.navigate(['vente/clients'])
}
AjoutFournisseur(){
this.clientservice.ajoutClient(this.client).subscribe(data => {console.log(data);this.saved = true;});
}
onSubmit(){
this.AjoutFournisseur()
}
ngOnInit(): void {
this.getNextIdClient()
}
}
This way the date time stored in MYSQL is wrong and i need to reformat it again using java to display it correctly in PDF reports , also it needs formatting to be displayed in Angular again.
Any advise? Thanks
