Hi community!! Please help me find the solution
I do a filtered search from ng-select of angular in return, it gives me the expected result of the search
but I have defined a loading method to automatically fill in the data related to the search found with ng-select, in the pu, qte field … I have the error and it does not load the data related to the element
I point out that with simple select it works with the drop-down list, but I don’t want the drop-down list, the search must be automatic, that’s why I preferred to use angular’s ng-select
this is my ts component
export class AddLcommComponent implements OnInit {
formData: FormGroup;
articleList:Article[];
isValid:boolean=true;
wtotht = 0;
wtottva = 0;
wtotttc = 0;
selected = [];
constructor( public service:LcommandeService,private toastr :ToastrService,
@Inject(MAT_DIALOG_DATA) public data,
public dialogRef:MatDialogRef<AddLcommComponent>,
private articleService:ArtcileService,
private commandeService:CommandeService,public fb: FormBuilder){}
get f() { return this.formData.controls; }
ngOnInit() {
if(this.data.lcommandeIndex==null)
{
this.InfoForm();
}
else
{
this.formData =this.fb.group(Object.assign({},this.commandeService.list[this.data.lcommandeIndex]));
}
this.articleService.listAllArticle().subscribe(
response =>{this.articleList= response;}
);
}
InfoForm() {
this.formData = this.fb.group({
id: null,
numero :this.data.numero,
qte : 0,
pu : 0,
tva : 0,
totht : 0,
tottva :0,
totttc :0,
libart :'',
code_article :'',
comm_id : this.data.id_commande,
});
}
selectPrice(ctrl){
if(ctrl.selectedIndex == 0){
this.f['pu'].setValue(0);
this.f['tva'].setValue(0);
this.f['libart'].setValue('');
this.f['qte'].setValue(0);
}
else{
this.f['pu'].setValue(this.articleList[ctrl.selectedIndex-1].pv);
this.f['tva'].setValue(this.articleList[ctrl.selectedIndex-1].tva);
this.f['libart'].setValue(this.articleList[ctrl.selectedIndex - 1].libelle);
this.f['code_article'].setValue( this.articleList[ctrl.selectedIndex - 1].code);
}
this.cal();
}
cal(){
this.wtotht = parseFloat((this.formData.value.qte * this.formData.value.pu).toFixed(3));
this.wtottva = parseFloat(((this.wtotht * this.formData.value.tva)*0.01).toFixed(3));
this.wtotttc = parseFloat((this.wtotht + this.wtottva).toFixed(3));
this.f['totht'].setValue(this.wtotht);
this.f['tottva'].setValue(this.wtottva);
this.f['totttc'].setValue(this.wtotttc);
}
onSubmit() {
if(this.data.lcommandeIndex==null)
{
this.commandeService.list.push(this.formData.value)
this.dialogRef.close();
}
else
{
this.commandeService.list[this.data.lcommandeIndex] = this.formData.value;
}
this.dialogRef.close();
}
validateForm(formData:Lcommande){
this.isValid=true;
if(formData.code =='')
this.isValid=false;
else if(formData.qte ==0)
this.isValid=false;
return this.isValid;
}
}
Hi community!! Please help me find the solution
I do a filtered search from ng-select of angular in return, it gives me the expected result of the search
but I have defined a loading method to automatically fill in the data related to the search found with ng-select, in the pu, qte field … I have the error and it does not load the data related to the element
I point out that with simple select it works with the drop-down list, but I don’t want the drop-down list, the search must be automatic, that’s why I preferred to use angular’s ng-select
this is my ts component
export class AddLcommComponent implements OnInit {
formData: FormGroup;
articleList:Article[];
isValid:boolean=true;
wtotht = 0;
wtottva = 0;
wtotttc = 0;
selected = [];
constructor( public service:LcommandeService,private toastr :ToastrService,
@Inject(MAT_DIALOG_DATA) public data,
public dialogRef:MatDialogRef<AddLcommComponent>,
private articleService:ArtcileService,
private commandeService:CommandeService,public fb: FormBuilder){}
get f() { return this.formData.controls; }
ngOnInit() {
if(this.data.lcommandeIndex==null)
{
this.InfoForm();
}
else
{
this.formData =this.fb.group(Object.assign({},this.commandeService.list[this.data.lcommandeIndex]));
}
this.articleService.listAllArticle().subscribe(
response =>{this.articleList= response;}
);
}
InfoForm() {
this.formData = this.fb.group({
id: null,
numero :this.data.numero,
qte : 0,
pu : 0,
tva : 0,
totht : 0,
tottva :0,
totttc :0,
libart :'',
code_article :'',
comm_id : this.data.id_commande,
});
}
selectPrice(ctrl){
if(ctrl.selectedIndex == 0){
this.f['pu'].setValue(0);
this.f['tva'].setValue(0);
this.f['libart'].setValue('');
this.f['qte'].setValue(0);
}
else{
this.f['pu'].setValue(this.articleList[ctrl.selectedIndex-1].pv);
this.f['tva'].setValue(this.articleList[ctrl.selectedIndex-1].tva);
this.f['libart'].setValue(this.articleList[ctrl.selectedIndex - 1].libelle);
this.f['code_article'].setValue( this.articleList[ctrl.selectedIndex - 1].code);
}
this.cal();
}
cal(){
this.wtotht = parseFloat((this.formData.value.qte * this.formData.value.pu).toFixed(3));
this.wtottva = parseFloat(((this.wtotht * this.formData.value.tva)*0.01).toFixed(3));
this.wtotttc = parseFloat((this.wtotht + this.wtottva).toFixed(3));
this.f['totht'].setValue(this.wtotht);
this.f['tottva'].setValue(this.wtottva);
this.f['totttc'].setValue(this.wtotttc);
}
onSubmit() {
if(this.data.lcommandeIndex==null)
{
this.commandeService.list.push(this.formData.value)
this.dialogRef.close();
}
else
{
this.commandeService.list[this.data.lcommandeIndex] = this.formData.value;
}
this.dialogRef.close();
}
validateForm(formData:Lcommande){
this.isValid=true;
if(formData.code =='')
this.isValid=false;
else if(formData.qte ==0)
this.isValid=false;
return this.isValid;
}
}
my html component
<h1 class="dislay-4">Commande </h1>
<hr>
<form [formGroup]="this.formData" (ngSubmit)="onSubmit()">
<input type="hidden" class="form-control" formControlName="id" id="id">
<input type="hidden" class="form-control" formControlName="libart" id="libart">
<div class="form-group">
<label>Article </label>
<ng-select
placeholder="Taper le nom du Produit"
multiple = "true"
maxSelectedItems=1
class="form-control" formControlName="code_article" id="code_article"
(change)="selectPrice($event.target)">
<ng-option *ngFor="let item of articleList" value="{{item.code}}">
{{item.libelle}}
</ng-option>
</ng-select>
</div>
<br/>
<br/>
<div class="form-group">
<label>Prix Unitaire </label>
<div class="input-group">
<input class="form-control" formControlName="pu" id="pu" (keyup)="cal()"
[class.is-invalid]="!isValid && formData.value.pu==0" >
</div>
</div>
<div class="form-group">
<label>Quantité</label>
<div class="input-group">
<input name="qte" class="form-control" formControlName="qte" id="qte" (keyup)="cal()"
[class.is-invalid]="!isValid && formData.value.qte==0">
</div>
</div>
model
export class Article {
id: number;
code: string;
libelle: string;
pa : number;
pv : number;
tva: number;
stkinit : number;
code_categ : string;
casier : string;
comment: string ;
maison_production : string;
type_emballage : string;
createAt : Date;
expirationdate : Date;
}
my service article
export class ArtcileService {
private baseUrl = '/api/article';
private baseUrlP = '/api/printProduct';
choixoperation: string = 'A';
public dataForm: FormGroup;
listD : Article[] ;
list : any=[];
constructor(private http: HttpClient) { }
getData(id: number): Observable<Object>{
return this.http.get(`${this.baseUrl}/${id}`);
}
createArticle(infos: Object): Observable<Object>{
return this.http.post(`${this.baseUrl}`, infos);
}
updateArticle(id: number, value: any): Observable<Object>{
return this.http.put(`${this.baseUrl}/${id}`, value);
}
delete(id: number): Observable<any>{
return this.http.delete(`${this.baseUrl}/${id}`, {responseType: 'text'});
}
listAllArticle(): Observable<any>{
return this.http.get(`${this.baseUrl}`);
}
printRecapArticle = (report: Report): Observable<StrintResltat>=>{
const data = JSON.stringify(report);
const urlSend = this.baseUrl;
return this.http.post<StrintResltat>(urlSend, data,{
headers: new HttpHeaders({
'Content-Type' : 'application/json'
})
});
}
}