Hi Support
how to assign value and display text when edit form.
I'm use: -angular 7 -asp.net core
8 Answer(s)
-
0
Hi,
Have you tried ngModel ?
-
0
is "this" what you need ?
use [(ngModel)] and get select event with (onSelect)="selectMenuItem($event)"
-
0
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> -
0
Hi @sophoana
Could you share entire TS and HTML file contents ?
-
0
.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> -
0
.html file: (copied from previous comment)
<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> -
0
I'm not sure I got your problem right. If what you need is to fill the autocomplete when the edit modal is opened, you can do it like this.
... show(taxId?: number): void { this.active = true; this._taxesServiceProxy.getTaxForEdit(taxId).subscribe(taxResult => { /*this.filterChartOfAccounts()*/ this.tax = taxResult; //set chartOfAccount with stored value this.chartOfAccount = new NameValueOfString({ name: this.tax.chart.Name, value: this.tax.chart.Id//value }); this.modal.show(); }); } ... -
0
This issue is closed because of no recent activity. Please open a new issue if you are still having this problem.
