TS file:
onSelectedUnitMeasurePrice(): void {
let selectedUnitMeasurePrice = new Array<NameValueOfString>();
selectedUnitMeasurePrice.push(this.unitMeasurePrice);
this._unitMeasureServiceProxy.sendAndGetSelectedUnitMeasures(selectedUnitMeasurePrice)
.subscribe((ChartAccount: NameValueOfString[]) => {
_.forEach(ChartAccount, item => {
this.itemPrice.push(new ItemPricesEditDto({price: this.priceValue, unitMeasureId: parseInt(item.value), unitMeasureName: item.name, id: 0}));
this.primengTableHelper.totalRecordsCount = this.itemPrice.length;
this.primengTableHelper.records = this.itemPrice;
this.priceValue = null;
this.unitMeasurePrice = null;
});
});
}
Hi support
My task I want to show like this:
HTML File:
<span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"row mb-4"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"col-sm-12"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"clickable-item text-muted"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">*ngIf</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">(click)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSettingAreShown=!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(128, 128, 128);">><</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"fa fa-angle-down"</span><span class="colour" style="color: rgb(128, 128, 128);">></</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);"> {{"ShowCustomerSetting" | localize}}</span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"clickable-item text-muted"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">*ngIf</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSettingAreShown"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">(click)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSettingAreShown=!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(128, 128, 128);">><</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"fa fa-angle-up"</span><span class="colour" style="color: rgb(128, 128, 128);">></</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);"> {{"HideCustomerSetting" | localize}}</span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);"> </span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"row mb-4"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">[hidden]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"form-group col-md-6"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">label</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">for</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSaleCode"</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);">{{"CustomerSaleCode" | localize}}</span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">label</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);"> </span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">p-autoComplete</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">id</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">name</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">field</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"name"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">[(ngModel)]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"chartOfAccountSaleCode"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">[suggestions]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"filteredChartOfAccountSaleCode"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">(completeMethod)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"filterChartOfAccountSaleCode($event)"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">(onSelect)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"onSelectedChartOfAccountsSaleCode($event)"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">[minLength]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"1"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">inputStyleClass</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"form-control"</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">styleClass</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"width-percent-100"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">ng-template</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">let-chartOfAccount</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">pTemplate</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"item"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> {{chartOfAccount.name}}</span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">ng-template</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">p-autoComplete</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span>
html file: <label><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">class</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"row mb-4"</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">[hidden]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"!CustomerSettingAreShown"</span><span class="colour" style="color:rgb(128, 128, 128)">></span></label><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">class</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"form-group col-md-6"</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">label</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">for</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"CustomerSaleCode"</span><span class="colour" style="color:rgb(128, 128, 128)">></span><span class="colour" style="color:rgb(212, 212, 212)">{{"CustomerSaleCode" | localize}}</span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">label</span><span class="colour" style="color:rgb(128, 128, 128)">></span><span class="colour" style="color:rgb(212, 212, 212)"> </span>
<span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">p-autoComplete</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">id</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">name</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">field</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"name"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">[(ngModel)]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"chartOfAccountSaleCode"</span><span class="colour" style="color:rgb(212, 212, 212)"> </span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">[suggestions]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"filteredChartOfAccountSaleCode"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">(completeMethod)</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"filterChartOfAccountSaleCode($event)"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">(onSelect)</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"onSelectedChartOfAccountsSaleCode($event)"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">[minLength]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"1"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">inputStyleClass</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"form-control"</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">styleClass</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"width-percent-100"</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">ng-template</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">let-chartOfAccount</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">pTemplate</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"item"</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)"> {{chartOfAccount.name}}</span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">ng-template</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">p-autoComplete</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(128, 128, 128)"></span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(128, 128, 128)">></span>
Many thanks support teams @demirmusa
.ts file:
import { Component, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { TaxesServiceProxy, TaxEditDto, ChartOfAccountServiceProxy, NameValueOfString } from '@shared/service-proxies/service-proxies';
import * as _ from 'lodash';
import { SelectItem } from "primeng/components/common/selectitem";
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'editTaxModal',
templateUrl: './edit-tax-modal.component.html'
})
export class EditTaxModalComponent extends AppComponentBase {
@ViewChild('editModal', { static: true }) modal: ModalDirective;
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
active = false;
saving = false;
tax: TaxEditDto = new TaxEditDto();
FilterText = "";
filteredChartOfAccount: NameValueOfString[];
chartOfAccount: any;
tmpGroup = new FormGroup({ user: new FormControl() });
constructor(injector: Injector
, private _taxesServiceProxy: TaxesServiceProxy
, private _chartOfAccountServiceProxy: ChartOfAccountServiceProxy) { super(injector); }
show(taxId?: number): void {
this.active = true;
this._taxesServiceProxy.getTaxForEdit(taxId).subscribe(taxResult => {
/*this.filterChartOfAccounts()*/
this.tax = taxResult;
this.modal.show();
});
}
// get ChartOfAccount
filterChartOfAccounts(): void {
this._chartOfAccountServiceProxy.getChartOfAccountSelectItems(this.FilterText).subscribe(chartOfAccountResult => {
this.filteredChartOfAccount = chartOfAccountResult;
});
}
// get ChartOfAccount
filterChartOfAccount(event): void {
this._chartOfAccountServiceProxy.getChartOfAccountSelectItems(event.query).subscribe(chartOfAccountResult => {
this.filteredChartOfAccount = chartOfAccountResult;
});
}
handleSelect(user) {
debugger;
this.tmpGroup.controls.SingleSelectInput.setValue('Bank');
}
// single select - post
onSelectedChartOfAccounts(): void {
let selectedChartOfAccounts = new Array<NameValueOfString>();
selectedChartOfAccounts.push(this.chartOfAccount);
this._chartOfAccountServiceProxy.sendAndGetSelectedChartOfAccounts(selectedChartOfAccounts)
.subscribe((ChartAccount: NameValueOfString[]) => {
_.forEach(ChartAccount, item => {
this.tax.vatOutChartOfAccountId = parseInt(item.value);
});
});
}
/*focus first field*/
onShown(): void {
document.getElementById('TaxName').focus();
}
/*close form*/
close(): void {
this.active = false;
this.modal.hide();
}
save(): void {
this.saving = true;
this._taxesServiceProxy.updateTaxes(this.tax)
.pipe(finalize(() => this.saving = false))
.subscribe(() => {
this.notify.info(this.l('SavedSuccessfully'));
this.close();
this.modalSave.emit(null);
});
}
}
.html file:
<div bsModal #editModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form *ngIf="active" #taxForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="new-password">
<div class="modal-header">
<h4 class="modal-title">
<span>{{"EditTaxes" | localize}}</span>
</h4>
<button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group col-sm-6">
<label for="TaxName">{{"TaxName" | localize}} *</label>
<input id="TaxName" #taxNameInput="ngModel" class="form-control" type="text" name="TaxName" [(ngModel)]="tax.name" required>
<validation-messages [formCtrl]="taxNameInput"></validation-messages>
</div>
<div class="form-group col-sm-6">
<label for="TaxValue">{{"TaxValue" | localize}} *</label>
<input id="TaxValue" #taxValueInput="ngModel" class="form-control" type="number" name="TaxValue" [(ngModel)]="tax.value" required>
<validation-messages [formCtrl]="taxValueInput"></validation-messages>
</div>
<div class="form-group col-sm-6">
<label for="ChartOfAccountParentInput">{{"TaxAccount" | localize}}</label>
<p-autoComplete
id="SingleSelectInput"
name="SingleSelectInput"
field="name"
[(ngModel)]="chartOfAccount"
[suggestions]="filteredChartOfAccount"
(completeMethod)="filterChartOfAccount($event)"
[minLength]="1"
inputStyleClass="form-control"
styleClass="width-percent-100">
<ng-template let-chartOfAccount pTemplate="item">
{{chartOfAccount.name}}
</ng-template>
</p-autoComplete>
</div>
<div class="form-group col-sm-6">
<label for="TaxDescription">{{"TaxDescription" | localize}}</label>
<input id="TaxDescription" #taxDescriptionInput="ngModel" class="form-control" type="text" name="TaxDescription" [(ngModel)]="tax.description">
</div>
<div class="form-group col-sm-6">
<div class="kt-checkbox-list">
<label for="TaxIsActive" class="kt-checkbox">
<input id="TaxIsActive" type="checkbox" name="TaxIsActive" [(ngModel)]="tax.isActive">
{{"TaxIsActive" | localize}}
<span></span>
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-secondary" (click)="close()">{{"Cancel" | localize}}</button>
<button type="submit" class="btn btn-primary" [disabled]="!taxForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
</div>
</div>
</form>
</div>
</div>
</div>
I used like this but not work. Can you show your solutions for me?
<div class="form-group col-sm-6">
<label for="ChartOfAccountParentInput">{{"TaxAccount" | localize}}</label>
<p-autoComplete
[(ngModel)]="chartOfAccount"
id="SingleSelectInput"
[suggestions]="filteredChartOfAccount"
(completeMethod)="filterChartOfAccount($event)"
(onSelect)="onSelectedChartOfAccounts($event)"
field="name"
[minLength]="3"
inputStyleClass="form-control"
styleClass="width-percent-100">
<ng-template let-chartOfAccount pTemplate="item">
{{chartOfAccount.name}}
</ng-template>
<ng-template let-chartOfAccount pTemplate="selectedItem">
{{chartOfAccount.name}}
</ng-template>
</p-autoComplete>
</div>
I'm use Angular version 7 and .net core.