Angular Priming spinner所需验证样式未显示

Priming微调器输入字段未正确显示所需的验证样式（输入字段从未用红色边框标记）。 我正在使用angular8和Priming 8.0.2。数字字段“iznosDuguje”声明为带有验证-[Validators.required]的FormControl。表单控件已正确标记为有效/无效/脏/等，但通常的样式（红色边框）从未显示在p微调器上

验证截图（包括整个面板）：

//相关。ts部分-表格“iznosDuguje”控制启动

//相关.html部分-微调器“iznosDuguje”和验证消息

<form [formGroup]="editPrpStavkaPlanaForm" (ngSubmit)="snimi()">
//more code
        <div class="ui-g">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="iznosDuguje" l10nTranslate>prpStavkaPlanaRashodaIPrihoda.iznosDuguje</label>
                <label>*</label>
            </div>

            <p-spinner class="ui-md-4 ui-sm-6" style="margin-left: -0.6%;" [step]="0.01" #iznosDuguje name="iznosDuguje"
                formControlName="iznosDuguje"  tabindex="1"
                [decimalSeparator]="numberUtil.getDecimalSeparator(lang)" [thousandSeparator]="numberUtil.getThousandSeparator(lang)" [formatInput]="true">
            </p-spinner>

            <div class="ui-md-4 ui-sm-12 ui-message ui-messages-error ui-corner-all" style="margin-left: 0.6%;"
                *ngIf="!editPrpStavkaPlanaForm.get('iznosDuguje').valid && editPrpStavkaPlanaForm.get('iznosDuguje').dirty && editPrpStavkaPlanaForm.get('iznosDuguje').errors">

                <span
                    *ngIf="editPrpStavkaPlanaForm.get('iznosDuguje').errors && editPrpStavkaPlanaForm.get('iznosDuguje').errors['required']">
                    <i class="fa fa-close"></i>
                    <label for="iznosDuguje" l10nTranslate>validations.required</label>
                </span>

            </div>
//more code

//更多代码
PRPSTAVKAPRANARASHODAIPRIHODA.iznosDuguje
*
验证。必需
//更多代码

//全组件 该字段在FormGroup中声明为FormControl：

 import { NumberUtil } from 'src/app/global/utils/number-util';
import {  OnInit, Input, Output, EventEmitter, Component } from '@angular/core';
import { CoreSort, SortOrder } from './../../../../../global/domains/CoreSort';
import { HttpErrorResponse } from '@angular/common/http';
import { PrpPlanRashodaPrihoda } from 'src/app/backend-domains/prp/PrpPlanRashodaPrihoda';
import { SffIzvorFinansiranja } from './../../../../../backend-domains/sff/SffIzvorFinansiranja';
import { SffMestoTroska } from './../../../../../backend-domains/sff/SffMestoTroska';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { PrpStavkaPlana } from './../../../../../backend-domains/prp/PrpStavkaPlana';
import { BaseComponent } from './../../../../../global/utils/base.component';
import { CoreBackendService } from './../../../../../services/core-backend.service';
import { CoreMessageService } from './../../../../../services/core-message.service';
import { Language, DefaultLocale, TranslationService } from 'angular-l10n';
import { SysKorisnikUtil } from 'src/app/global/utils/sys-korisnik-util';

@Component ({
  selector: 'app-prp-stavka-rashoda-prihoda-modal-panel',
  templateUrl: './prp-stavka-rashoda-prihoda-modal-panel.component.html',
  styleUrls: ['./prp-stavka-rashoda-prihoda-modal-panel.component.css']
})
export class PrpStavkaRashodaPrihodaModalPanelComponent extends BaseComponent implements OnInit {

  constructor(private ms: CoreMessageService,
    private coreBackendService: CoreBackendService,
    private translation: TranslationService,
    public numberUtil: NumberUtil) { super(); }

  @Language() lang: string;
  @DefaultLocale() defaultLocale: string;

  prpStavkaPlanaEdit: PrpStavkaPlana;
  editPrpStavkaPlanaForm: FormGroup;

  //lov mesta troska
  fgVisibleSffMestoTroskaLovModalPanel: boolean;
  selectedSffMestoTroska: SffMestoTroska;
  sffMestoTroskas: SffMestoTroska[];
  sffIzvorFinansiranjas: SffIzvorFinansiranja[]

  //lov izvora finansiranja
  fgVisibleSffIzvorFinansiranjaLovModalPanel: boolean;
  @Input() selectedSffIzvorFinansiranja: SffIzvorFinansiranja;

  @Input() prpStavkaPlanaEditAzuriranje: PrpStavkaPlana;
  @Input() fgVisible: boolean;
  @Input() fgUnos: boolean;
  @Input() prpPlanRashodaPrihoda: PrpPlanRashodaPrihoda;
  @Output() hideModalPanel = new EventEmitter<boolean>();

  ngOnInit() {
    this.initForm();
    this.sffMestoTroskas = [];
    this.sffIzvorFinansiranjas = [];

  }

  onShow() {
    this.initForm();
    this.sffMestoTroskas = [];
    this.sffIzvorFinansiranjas = [];

  }

  onHide() {
    this.hideModalPanel.emit(false);
  }

  initForm() {
    if (this.fgUnos) {
      this.prpStavkaPlanaEdit = new PrpStavkaPlana();

    } else {

      this.prpStavkaPlanaEdit = this.prpStavkaPlanaEditAzuriranje;

      this.selectedSffIzvorFinansiranja = this.prpStavkaPlanaEditAzuriranje.sffIzvorFinansiranja;
      this.selectedSffMestoTroska = this.prpStavkaPlanaEditAzuriranje.sffMestoTroska;

    }

    this.editPrpStavkaPlanaForm = new FormGroup({

      'brojKonta': new FormControl(this.prpStavkaPlanaEdit.brojKonta,[Validators.required]),
      'iznosDuguje': new FormControl(this.prpStavkaPlanaEdit.iznosDuguje? this.prpStavkaPlanaEdit.iznosDuguje : "", [Validators.required]),
      'iznosPotrazuje': new FormControl(this.prpStavkaPlanaEdit.iznosPotrazuje? this.prpStavkaPlanaEdit.iznosPotrazuje : "", [Validators.required]),
      'izvorFinansiranja': new FormControl(this.prpStavkaPlanaEdit.sffIzvorFinansiranja ? this.prpStavkaPlanaEdit.sffIzvorFinansiranja.internaSifra : null),
      'mestoTroska': new FormControl(this.prpStavkaPlanaEdit.sffMestoTroska ? this.prpStavkaPlanaEdit.sffMestoTroska.sifra : null),
      'namena': new FormControl(this.prpStavkaPlanaEdit.namena, [Validators.required]),
      'napomena': new FormControl(this.prpStavkaPlanaEdit.napomena),
    });

  }

  hidePanel() {
    this.fgVisible = false;
  }

  snimi() {

    this.markFormAsDirty();
    if (this.editPrpStavkaPlanaForm.valid) {
      this.prpStavkaPlanaEdit.prpPlanRashodaPrihoda = this.prpPlanRashodaPrihoda;
      this.prpStavkaPlanaEdit.brojKonta = this.editPrpStavkaPlanaForm.get('brojKonta').value;
      this.prpStavkaPlanaEdit.namena = this.editPrpStavkaPlanaForm.get('namena').value;
      this.prpStavkaPlanaEdit.napomena = this.editPrpStavkaPlanaForm.get('napomena').value;
      this.prpStavkaPlanaEdit.iznosDuguje = this.editPrpStavkaPlanaForm.get('iznosDuguje').value;
      this.prpStavkaPlanaEdit.iznosPotrazuje = this.editPrpStavkaPlanaForm.get('iznosPotrazuje').value;
      this.prpStavkaPlanaEdit.sffIzvorFinansiranja = this.selectedSffIzvorFinansiranja;
      this.prpStavkaPlanaEdit.sffMestoTroska = this.selectedSffMestoTroska;

      this.coreBackendService.postResource('/prp-stavka-plana/insert/', this.prpStavkaPlanaEdit).subscribe(
        (dataResult) => {
          this.ms.addSuccessMessage(this.translation.translate('prpEvidencijaPlanovaRashodaIPrihoda.snimanjePrpPlanRashodaPrihoda'), this.translation.translate('prpEvidencijaPlanovaRashodaIPrihoda.snimanjePrpPlanRashodaPrihodaUspesno'));
          this.hidePanel();
        },
        (error: HttpErrorResponse) => {
          this.ms.addErrorMessage(error.error.error, error.error.error_description);
        }
      );

    }
  }

  onShowLovMestoTroska() {
    this.fgVisibleSffMestoTroskaLovModalPanel = true;
  }

  resetMestoTroska() {
    this.selectedSffMestoTroska = null;
    this.editPrpStavkaPlanaForm.controls.mestoTroska.setValue(null);
    this.editPrpStavkaPlanaForm.get('mestoTroska').markAsDirty();
  }

  onHideLovMestoTroska(sffMestoTroska: SffMestoTroska) {
    if (sffMestoTroska) {
      this.selectedSffMestoTroska = sffMestoTroska;
    }
    setTimeout(() => { this.fgVisibleSffMestoTroskaLovModalPanel = false; });
  }


  public searchMestoTroska(event) {

    let sifra:string=event.query.trim();
    if(sifra.length<2){
      // ukucati barem 2 karaktera sifre
      this.sffMestoTroskas = [];
      return;
    }


    let coreSorts: CoreSort[] = [];

    let coreSort: CoreSort = { sortField: "sifra", sortOrder: SortOrder.ASC };
    coreSorts.push(coreSort);

    let pretraga: { key: string, value: any }[];
    pretraga = [];
    pretraga.push({ key: "sifra", value: sifra });
    pretraga.push({ key: "idFirma", value: SysKorisnikUtil.getOdabranaFirma().idFirma })


    return this.coreBackendService.getResourceForDataTable('/sff-mesto-troska/filter-lov', 0, 20, coreSorts, pretraga).subscribe(
      (response: any) => {
        this.sffMestoTroskas = response.content;
      },
      (error: HttpErrorResponse) => {
        this.sffMestoTroskas = [];

        if (error.status === 403) {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreUnauthorizedError"));
        }


        else {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreErrorMessageDescription"));
        }
      }
    );

  }

  public searchIzvorFinansiranja(event) {


    let internaSifra:string=event.query;

    let coreSorts: CoreSort[] = [];

    let coreSort: CoreSort = { sortField: "internaSifra", sortOrder: SortOrder.ASC };
    coreSorts.push(coreSort);

    let pretraga: { key: string, value: any }[];
    pretraga = [];
    pretraga.push({ key: "pretragaInternaSifra", value: internaSifra });
    pretraga.push({ key: "idFirma", value: SysKorisnikUtil.getOdabranaFirma().idFirma })


    return this.coreBackendService.getResourceForDataTable('/sff-izvor-finansiranja/filter-lov', 0, 20, coreSorts, pretraga).subscribe(
      (response: any) => {
        this.sffIzvorFinansiranjas = response.content;
      },
      (error: HttpErrorResponse) => {
        this.sffIzvorFinansiranjas = [];

        if (error.status === 403) {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreUnauthorizedError"));
        }


        else {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreErrorMessageDescription"));
        }
      }
    );

  }

  onShowLovIzvorFinansiranja() {
    this.fgVisibleSffIzvorFinansiranjaLovModalPanel = true;
  }

  resetIzvorFinansiranja() {
    this.selectedSffIzvorFinansiranja = null;
    this.editPrpStavkaPlanaForm.controls.izvorFinansiranja.setValue(null);
    this.editPrpStavkaPlanaForm.get('izvorFinansiranja').markAsDirty();
  }

  onHideLovIzvorFinansiranja(sffIzvorFinansiranja: SffIzvorFinansiranja) {
    if (sffIzvorFinansiranja) {
      this.selectedSffIzvorFinansiranja = sffIzvorFinansiranja;
    }
    setTimeout(() => { this.fgVisibleSffIzvorFinansiranjaLovModalPanel = false; });
  }

  markFormAsDirty() {
    Object.keys(this.editPrpStavkaPlanaForm.controls).forEach(key => {
      this.editPrpStavkaPlanaForm.get(key).markAsDirty();
    });

  }

}

从'src/app/global/utils/number util'导入{numberrutil}；
从'@angular/core'导入{OnInit，Input，Output，EventEmitter，Component}；
从“/../../../../../global/domains/CoreSort”导入{CoreSort，SortOrder}；
从“@angular/common/http”导入{HttpErrorResponse}；
从'src/app/backend domains/prp/PrpPlanRashodaPrihoda'导入{PrpPlanRashodaPrihoda}；
从“/../../../../../../../backend domains/sff/SffIzvorFinansiranja”导入{SffIzvorFinansiranja}；
从“/../../../../../../../backend domains/sff/SffMestoTroska”导入{SffMestoTroska}；
从'@angular/forms'导入{FormGroup，FormControl，Validators}；
从“/../../../../../../../backend domains/prp/PrpStavkaPlana”导入{PrpStavkaPlana}；
从'/../../../../../../../global/utils/base.component'导入{BaseComponent}；
从“/../../../../../../services/core backend.service”导入{CoreBackendService}；
从“../../../../../../../services/core message.service”导入{core messageservice}；
从'angular-l10n'导入{Language，DefaultLocale，TranslationService}；
从'src/app/global/utils/sys korisnik util'导入{SysKorisnikUtil}；
@组成部分({
选择器：“应用程序prp stavka rashoda PRHODA模式面板”，
templateUrl:'./prp stavka rashoda PRHODA modal panel.component.html'，
样式URL:['./prp stavka rashoda prihoda model panel.component.css']
})
导出类PrpStavkaRashodaPrihodaModalPanelComponent扩展了BaseComponent实现OnInit{
构造函数（私有ms:CoreMessageService，
专用coreBackendService:coreBackendService，
私人翻译：翻译服务，
public numberrutil:numberrutil）{super（）；}
@Language（）lang:string；
@DefaultLocale（）DefaultLocale:字符串；
prpstavkaplan编辑：prpstavkaplan；
editPrpStavkaPlanaForm:FormGroup；
//洛夫·梅斯塔·特罗斯卡
fgVisiblesFmfestroskalovmodalPanel:布尔值；
已选择的SFFMESTOROSKA:SFFMESTOROSKA；
SffMestoTroska:SffMestoTroska[]；
sffIzvorFinansiranjas:SffIzvorFinansiranja[]
//洛夫·伊兹沃拉·菲南斯拉尼亚酒店
fgVisiblesfIzvorFinansiranjalovmodalpanel：布尔值；
@输入（）选择SffIzvorFinansiranja:SffIzvorFinansiranja；
@输入（）PRPSTAVKAPLANEDITAZURIRANJE:PrpStavkaPlana；
@输入（）可见：布尔值；
@Input（）fgUnos:boolean；
@输入（）prpPlanRashodaPrihoda:prpPlanRashodaPrihoda；
@Output（）HideModelPanel=新的EventEmitter（）；
恩戈尼尼特（）{
this.initForm（）；
this.sffMestoTroskas=[]；
this.sffIzvorFinansiranjas=[]；
}
onShow（）{
this.initForm（）；
this.sffMestoTroskas=[]；
this.sffIzvorFinansiranjas=[]；
}
onHide（）{
this.hideModelPanel.emit（false）；
}
initForm（）{
如果（this.fgUnos）{
this.prpstavkaplan编辑=新的prpstavkaplan（）；
}否则{
this.prpStavkaPlanaEdit=this.prpStavkaPlanaEditAzuriranje；
this.selectedsfizvorfinansiranja=this.prpstavkaplaneditazurianje.sffIzvorFinansiranja；
this.selectedSffMestoTroska=this.prpstavkaplaneditazurianje.sffMestoTroska；
}
this.editPrpStavkaPlanaForm=新表单组({
'brojKonta'：新的FormControl（this.prpStavkaPlanaEdit.brojKonta，[Validators.required]），
“iznosDuguje”：新表单控件（this.prpStavkaPlanaEdit.iznosDuguje？this.prpStavkaPlanaEdit.iznosDuguje:，[Validators.required]），
“iznosPotrazuje”：新表单控件（this.prpstavkaplanedit.iznosPotrazuje？this.prpstavkaplanedit.iznosPotrazuje:，[Validators.required]），
“izvorFinansiranja”：新表单控件（this.prpStavkaPlanaEdit.sffIzvorFinansiranja？this.prpStavkaPlanaEdit.sffIzvorFinansiranja.internaSifra:null），
“mestoTroska”：新表单控件（this.prpStavkaPlanaEdit.sffMestoTroska？this.prpStavkaPlanaEdit.sffMestoTroska.sifra:null），
“namena”：新表单控件（this.prpStavkaPlanaEdit.namena，[Validators.required]），
“napomena”：新表单控件（this.prpstavkaplan.napomena），
});
}
hidePanel（）{
this.fgVisible=false；
}
斯尼米（）{
这个.markFormAsDirty（）；
if（this.editPrpStavkaPlanaForm.valid）{
this.prpStavkaPlanaEdit.prpPlanRashodaPrihoda=this.prpPlanRashodaPrihoda；
this.prpStavkaPlanaEdit.brojKonta=this.editprpsptavkaplanaform.get（'brojKonta'）.value；
this.prpStavkaPlanaEdit.namena=this.editPrpStavkaPlanaForm.get（'namena'）.value；
this.prpStavkaPlanaEdit.napomena=this.editprpsptavkaplanaform.get（'napomena'）.value；
this.prpStavkaPlanaEdit.iznosDuguje=this.editprpsptavkaplanaform.get（'iznosDuguje'）.value；
this.prpStavkaPlanaEdit.iznosPotrazuje=this.editPrpStavkaPlanaForm.get（'iznosPotrazuje'）.value；
this.prpStavkaPlanaEdit.sffIzvorFinansiranja=this.selectedSffIzvorFinansiranja；
this.prpStavkaPlanaEdit.sffmestoroska=this.selectedsffmestoroska；
this.coreBackendService.postResource（'/prp stavka plana/insert/'，this.prpstavkaplanedit）.订阅(
（数据结果）=>{
this.ms.addSuccessMessage（this.translation.translate（'prpevidencyjaplanovarashodaiprioda.snimanjePrpPlanRa
 import { NumberUtil } from 'src/app/global/utils/number-util';
import {  OnInit, Input, Output, EventEmitter, Component } from '@angular/core';
import { CoreSort, SortOrder } from './../../../../../global/domains/CoreSort';
import { HttpErrorResponse } from '@angular/common/http';
import { PrpPlanRashodaPrihoda } from 'src/app/backend-domains/prp/PrpPlanRashodaPrihoda';
import { SffIzvorFinansiranja } from './../../../../../backend-domains/sff/SffIzvorFinansiranja';
import { SffMestoTroska } from './../../../../../backend-domains/sff/SffMestoTroska';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { PrpStavkaPlana } from './../../../../../backend-domains/prp/PrpStavkaPlana';
import { BaseComponent } from './../../../../../global/utils/base.component';
import { CoreBackendService } from './../../../../../services/core-backend.service';
import { CoreMessageService } from './../../../../../services/core-message.service';
import { Language, DefaultLocale, TranslationService } from 'angular-l10n';
import { SysKorisnikUtil } from 'src/app/global/utils/sys-korisnik-util';

@Component ({
  selector: 'app-prp-stavka-rashoda-prihoda-modal-panel',
  templateUrl: './prp-stavka-rashoda-prihoda-modal-panel.component.html',
  styleUrls: ['./prp-stavka-rashoda-prihoda-modal-panel.component.css']
})
export class PrpStavkaRashodaPrihodaModalPanelComponent extends BaseComponent implements OnInit {

  constructor(private ms: CoreMessageService,
    private coreBackendService: CoreBackendService,
    private translation: TranslationService,
    public numberUtil: NumberUtil) { super(); }

  @Language() lang: string;
  @DefaultLocale() defaultLocale: string;

  prpStavkaPlanaEdit: PrpStavkaPlana;
  editPrpStavkaPlanaForm: FormGroup;

  //lov mesta troska
  fgVisibleSffMestoTroskaLovModalPanel: boolean;
  selectedSffMestoTroska: SffMestoTroska;
  sffMestoTroskas: SffMestoTroska[];
  sffIzvorFinansiranjas: SffIzvorFinansiranja[]

  //lov izvora finansiranja
  fgVisibleSffIzvorFinansiranjaLovModalPanel: boolean;
  @Input() selectedSffIzvorFinansiranja: SffIzvorFinansiranja;

  @Input() prpStavkaPlanaEditAzuriranje: PrpStavkaPlana;
  @Input() fgVisible: boolean;
  @Input() fgUnos: boolean;
  @Input() prpPlanRashodaPrihoda: PrpPlanRashodaPrihoda;
  @Output() hideModalPanel = new EventEmitter<boolean>();

  ngOnInit() {
    this.initForm();
    this.sffMestoTroskas = [];
    this.sffIzvorFinansiranjas = [];

  }

  onShow() {
    this.initForm();
    this.sffMestoTroskas = [];
    this.sffIzvorFinansiranjas = [];

  }

  onHide() {
    this.hideModalPanel.emit(false);
  }

  initForm() {
    if (this.fgUnos) {
      this.prpStavkaPlanaEdit = new PrpStavkaPlana();

    } else {

      this.prpStavkaPlanaEdit = this.prpStavkaPlanaEditAzuriranje;

      this.selectedSffIzvorFinansiranja = this.prpStavkaPlanaEditAzuriranje.sffIzvorFinansiranja;
      this.selectedSffMestoTroska = this.prpStavkaPlanaEditAzuriranje.sffMestoTroska;

    }

    this.editPrpStavkaPlanaForm = new FormGroup({

      'brojKonta': new FormControl(this.prpStavkaPlanaEdit.brojKonta,[Validators.required]),
      'iznosDuguje': new FormControl(this.prpStavkaPlanaEdit.iznosDuguje? this.prpStavkaPlanaEdit.iznosDuguje : "", [Validators.required]),
      'iznosPotrazuje': new FormControl(this.prpStavkaPlanaEdit.iznosPotrazuje? this.prpStavkaPlanaEdit.iznosPotrazuje : "", [Validators.required]),
      'izvorFinansiranja': new FormControl(this.prpStavkaPlanaEdit.sffIzvorFinansiranja ? this.prpStavkaPlanaEdit.sffIzvorFinansiranja.internaSifra : null),
      'mestoTroska': new FormControl(this.prpStavkaPlanaEdit.sffMestoTroska ? this.prpStavkaPlanaEdit.sffMestoTroska.sifra : null),
      'namena': new FormControl(this.prpStavkaPlanaEdit.namena, [Validators.required]),
      'napomena': new FormControl(this.prpStavkaPlanaEdit.napomena),
    });

  }

  hidePanel() {
    this.fgVisible = false;
  }

  snimi() {

    this.markFormAsDirty();
    if (this.editPrpStavkaPlanaForm.valid) {
      this.prpStavkaPlanaEdit.prpPlanRashodaPrihoda = this.prpPlanRashodaPrihoda;
      this.prpStavkaPlanaEdit.brojKonta = this.editPrpStavkaPlanaForm.get('brojKonta').value;
      this.prpStavkaPlanaEdit.namena = this.editPrpStavkaPlanaForm.get('namena').value;
      this.prpStavkaPlanaEdit.napomena = this.editPrpStavkaPlanaForm.get('napomena').value;
      this.prpStavkaPlanaEdit.iznosDuguje = this.editPrpStavkaPlanaForm.get('iznosDuguje').value;
      this.prpStavkaPlanaEdit.iznosPotrazuje = this.editPrpStavkaPlanaForm.get('iznosPotrazuje').value;
      this.prpStavkaPlanaEdit.sffIzvorFinansiranja = this.selectedSffIzvorFinansiranja;
      this.prpStavkaPlanaEdit.sffMestoTroska = this.selectedSffMestoTroska;

      this.coreBackendService.postResource('/prp-stavka-plana/insert/', this.prpStavkaPlanaEdit).subscribe(
        (dataResult) => {
          this.ms.addSuccessMessage(this.translation.translate('prpEvidencijaPlanovaRashodaIPrihoda.snimanjePrpPlanRashodaPrihoda'), this.translation.translate('prpEvidencijaPlanovaRashodaIPrihoda.snimanjePrpPlanRashodaPrihodaUspesno'));
          this.hidePanel();
        },
        (error: HttpErrorResponse) => {
          this.ms.addErrorMessage(error.error.error, error.error.error_description);
        }
      );

    }
  }

  onShowLovMestoTroska() {
    this.fgVisibleSffMestoTroskaLovModalPanel = true;
  }

  resetMestoTroska() {
    this.selectedSffMestoTroska = null;
    this.editPrpStavkaPlanaForm.controls.mestoTroska.setValue(null);
    this.editPrpStavkaPlanaForm.get('mestoTroska').markAsDirty();
  }

  onHideLovMestoTroska(sffMestoTroska: SffMestoTroska) {
    if (sffMestoTroska) {
      this.selectedSffMestoTroska = sffMestoTroska;
    }
    setTimeout(() => { this.fgVisibleSffMestoTroskaLovModalPanel = false; });
  }


  public searchMestoTroska(event) {

    let sifra:string=event.query.trim();
    if(sifra.length<2){
      // ukucati barem 2 karaktera sifre
      this.sffMestoTroskas = [];
      return;
    }


    let coreSorts: CoreSort[] = [];

    let coreSort: CoreSort = { sortField: "sifra", sortOrder: SortOrder.ASC };
    coreSorts.push(coreSort);

    let pretraga: { key: string, value: any }[];
    pretraga = [];
    pretraga.push({ key: "sifra", value: sifra });
    pretraga.push({ key: "idFirma", value: SysKorisnikUtil.getOdabranaFirma().idFirma })


    return this.coreBackendService.getResourceForDataTable('/sff-mesto-troska/filter-lov', 0, 20, coreSorts, pretraga).subscribe(
      (response: any) => {
        this.sffMestoTroskas = response.content;
      },
      (error: HttpErrorResponse) => {
        this.sffMestoTroskas = [];

        if (error.status === 403) {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreUnauthorizedError"));
        }


        else {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreErrorMessageDescription"));
        }
      }
    );

  }

  public searchIzvorFinansiranja(event) {


    let internaSifra:string=event.query;

    let coreSorts: CoreSort[] = [];

    let coreSort: CoreSort = { sortField: "internaSifra", sortOrder: SortOrder.ASC };
    coreSorts.push(coreSort);

    let pretraga: { key: string, value: any }[];
    pretraga = [];
    pretraga.push({ key: "pretragaInternaSifra", value: internaSifra });
    pretraga.push({ key: "idFirma", value: SysKorisnikUtil.getOdabranaFirma().idFirma })


    return this.coreBackendService.getResourceForDataTable('/sff-izvor-finansiranja/filter-lov', 0, 20, coreSorts, pretraga).subscribe(
      (response: any) => {
        this.sffIzvorFinansiranjas = response.content;
      },
      (error: HttpErrorResponse) => {
        this.sffIzvorFinansiranjas = [];

        if (error.status === 403) {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreUnauthorizedError"));
        }


        else {
          this.ms.addErrorMessage(this.translation.translate('error.coreErrorMessage'), this.translation.translate("error.coreErrorMessageDescription"));
        }
      }
    );

  }

  onShowLovIzvorFinansiranja() {
    this.fgVisibleSffIzvorFinansiranjaLovModalPanel = true;
  }

  resetIzvorFinansiranja() {
    this.selectedSffIzvorFinansiranja = null;
    this.editPrpStavkaPlanaForm.controls.izvorFinansiranja.setValue(null);
    this.editPrpStavkaPlanaForm.get('izvorFinansiranja').markAsDirty();
  }

  onHideLovIzvorFinansiranja(sffIzvorFinansiranja: SffIzvorFinansiranja) {
    if (sffIzvorFinansiranja) {
      this.selectedSffIzvorFinansiranja = sffIzvorFinansiranja;
    }
    setTimeout(() => { this.fgVisibleSffIzvorFinansiranjaLovModalPanel = false; });
  }

  markFormAsDirty() {
    Object.keys(this.editPrpStavkaPlanaForm.controls).forEach(key => {
      this.editPrpStavkaPlanaForm.get(key).markAsDirty();
    });

  }

}


<p-dialog [modal]="true" [contentStyle]="{'overflow':'visible'}" [(visible)]="fgVisible" (onShow)="onShow();"
    (onHide)="onHide()" [responsive]="true" [closeOnEscape]="false" focusFirstDirective>
    <p-header>
        <label *ngIf="fgUnos" l10nTranslate>new</label>
        <label *ngIf="!fgUnos" l10nTranslate>edit</label>
    </p-header>

    <form [formGroup]="editPrpStavkaPlanaForm" (ngSubmit)="snimi()">

        <div class="ui-g">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="brojKonta" l10nTranslate>prpStavkaPlanaRashodaIPrihoda.brojKonta</label>
                <label>*</label>
            </div>
            <input #brojKonta class="ui-md-4 ui-sm-6 first" pInputText type="text" id="brojKonta" name="brojKonta"
                formControlName="brojKonta" maxlength="20" />
            <div class="ui-md-4 ui-sm-12 ui-message ui-messages-error ui-corner-all"
                *ngIf="!editPrpStavkaPlanaForm.get('brojKonta').valid && editPrpStavkaPlanaForm.get('brojKonta').dirty && editPrpStavkaPlanaForm.get('brojKonta').errors">

                <span
                    *ngIf="editPrpStavkaPlanaForm.get('brojKonta').errors && editPrpStavkaPlanaForm.get('brojKonta').errors['required']">
                    <i class="fa fa-close"></i>
                    <label for="brojKonta" l10nTranslate>validations.required</label>
                </span>

                <span
                    *ngIf="editPrpStavkaPlanaForm.get('brojKonta').errors && editPrpStavkaPlanaForm.get('brojKonta').errors['emptyRequiredField']">
                    <i class="fa fa-close"></i>
                    <label for="brojKonta" l10nTranslate>validations.emptyRequiredField</label>
                </span>
            </div>
        </div>

        <div class="ui-g">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="iznosDuguje" l10nTranslate>prpStavkaPlanaRashodaIPrihoda.iznosDuguje</label>
                <label>*</label>
            </div>

            <p-spinner class="ui-md-4 ui-sm-6" style="margin-left: -0.6%;" [step]="0.01" #iznosDuguje name="iznosDuguje"
                formControlName="iznosDuguje"  tabindex="1"
                [decimalSeparator]="numberUtil.getDecimalSeparator(lang)" [thousandSeparator]="numberUtil.getThousandSeparator(lang)" [formatInput]="true">
            </p-spinner>

            <div class="ui-md-4 ui-sm-12 ui-message ui-messages-error ui-corner-all" style="margin-left: 0.6%;"
                *ngIf="!editPrpStavkaPlanaForm.get('iznosDuguje').valid && editPrpStavkaPlanaForm.get('iznosDuguje').dirty && editPrpStavkaPlanaForm.get('iznosDuguje').errors">

                <span
                    *ngIf="editPrpStavkaPlanaForm.get('iznosDuguje').errors && editPrpStavkaPlanaForm.get('iznosDuguje').errors['required']">
                    <i class="fa fa-close"></i>
                    <label for="iznosDuguje" l10nTranslate>validations.required</label>
                </span>

            </div>

        </div>

        <div class="ui-g">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="iznosPotrazuje" l10nTranslate>prpStavkaPlanaRashodaIPrihoda.iznosPotrazuje</label>
                <label>*</label>
            </div>
            <p-spinner class="ui-md-4 ui-sm-6" style="margin-left: -0.6%;" [step]="0.01" #iznosPotrazuje
                name="iznosPotrazuje" formControlName="iznosPotrazuje" 
                [decimalSeparator]="numberUtil.getDecimalSeparator(lang)" [thousandSeparator]="numberUtil.getThousandSeparator(lang)" [formatInput]="true"></p-spinner>

            <div class="ui-md-4 ui-sm-12 ui-message ui-messages-error ui-corner-all" style="margin-left: 0.6%;"
                *ngIf="!editPrpStavkaPlanaForm.get('iznosPotrazuje').valid && editPrpStavkaPlanaForm.get('iznosPotrazuje').dirty && editPrpStavkaPlanaForm.get('iznosPotrazuje').errors">

                <span
                    *ngIf="editPrpStavkaPlanaForm.get('iznosPotrazuje').errors && editPrpStavkaPlanaForm.get('iznosPotrazuje').errors['required']">
                    <i class="fa fa-close"></i>
                    <label for="iznosPotrazuje" l10nTranslate>validations.required</label>
                </span>
            </div>
        </div>

        <div class="ui-g" style="margin-bottom: 5px;">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="izvorFinansiranja" translate>prpStavkaPlanaRashodaIPrihoda.izvorFinansiranja</label>
            </div> 
            <p-autoComplete class="ui-md-4 ui-sm-6" formControlName="izvorFinansiranja" [minLength]="1" field="internaSifra"
                [placeholder]="'prpStavkaPlanaRashodaIPrihoda.unosIzvorFinansiranja'|translate:lang"
                [suggestions]="sffIzvorFinansiranjas" (completeMethod)="searchIzvorFinansiranja($event)"
                [forceSelection]="true" [style]="{'width':'100%', 'margin-left': '-0.4vw'}" [inputStyle]="{'width':'100%'}"
                [(ngModel)]="selectedSffIzvorFinansiranja" id="izvorFinansiranja" name="izvorFinansiranja">
                <ng-template let-value pTemplate="item"> 
                    <span>{{value.internaSifra}}</span>
                </ng-template>
            </p-autoComplete>
            <div class="ui-sm-2 ui-md-1">
                <button icon="fa fa-list" style="margin-right: 3px;" pButton (click)="onShowLovIzvorFinansiranja()"
                    type="button" [title]="'choose'|translate:lang"></button>
                <button pButton icon="fa fa-close" [title]="'delete'|translate:lang" type="button"
                    class="ui-button-danger" (click)="resetIzvorFinansiranja()"></button>
            </div>
        </div>

        <div class="ui-g" style="margin-bottom: 5px;">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="mestoTroska" translate>prpStavkaPlanaRashodaIPrihoda.mestoTroska</label>
            </div>
            <p-autoComplete class="ui-md-4 ui-sm-6" formControlName="mestoTroska" [minLength]="2" field="sifra"
                [placeholder]="'prpStavkaPlanaRashodaIPrihoda.unosSifreMestaTroska'|translate:lang"
                [suggestions]="sffMestoTroskas" (completeMethod)="searchMestoTroska($event)"
                [forceSelection]="true" [style]="{'width':'100%', 'margin-left': '-0.4vw'}" [inputStyle]="{'width':'100%'}"
                [(ngModel)]="selectedSffMestoTroska" id="mestoTroska" name="mestoTroska">
                <ng-template let-value pTemplate="item">
                        <span>{{value.sifra}}</span>
                    </ng-template>
            </p-autoComplete>
            <div class="ui-sm-2 ui-md-1">
                <button icon="fa fa-list" style="margin-right: 3px;" pButton (click)="onShowLovMestoTroska()"
                    type="button" [title]="'choose'|translate:lang"></button>
                <button pButton icon="fa fa-close" [title]="'delete'|translate:lang" type="button"
                    class="ui-button-danger" (click)="resetMestoTroska()"></button>
            </div>
        </div>
        <!-- <div class="ui-g" style="margin-bottom: 5px;">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label>"ss"</label>
            </div>
            <div class="ui-md-4 ui-sm-6">
                <input readonly="true" [(ngModel)]= "selectedSffMestoTroska? selectedSffMestoTroska.naziv: selectedSffMestoTroska " [ngModelOptions]="{standalone: true}" />
            </div>
        </div> -->

        <div class="ui-g">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="namena" l10nTranslate>core.namena</label>
                <label>*</label>
            </div>
            <textarea #namena class="ui-md-10 ui-sm-6" pInputTextarea type="text" id="namena" name="namena"
                formControlName="namena" maxlength="512"></textarea>
            <div class="ui-md-2 ui-sm-6 text-left">
                &nbsp;
            </div>
            <div class="ui-md-10 ui-sm-6 ui-message ui-messages-error ui-corner-all"
                *ngIf="!editPrpStavkaPlanaForm.get('namena').valid && editPrpStavkaPlanaForm.get('namena').dirty && editPrpStavkaPlanaForm.get('namena').errors">
                <span
                    *ngIf="editPrpStavkaPlanaForm.get('namena').errors && editPrpStavkaPlanaForm.get('namena').errors['required']">
                    <i class="fa fa-close"></i>
                    <label for="namena" l10nTranslate>validations.required</label>
                </span>
                <span
                    *ngIf="editPrpStavkaPlanaForm.get('namena').errors && editPrpStavkaPlanaForm.get('namena').errors['emptyRequiredField']">
                    <i class="fa fa-close"></i>
                    <label for="namena" l10nTranslate>validations.emptyRequiredField</label>
                </span>
            </div>

        </div>

        <div class="ui-g">
            <div class="ui-md-2 ui-sm-6 text-right">
                <label for="napomena" l10nTranslate>core.napomena</label>
            </div>
            <textarea #napomena class="ui-md-10 ui-sm-6" pInputTextarea type="text" id="napomena" name="napomena"
                formControlName="napomena" maxlength="512"></textarea>
            <div class="ui-md-2 ui-sm-6 text-left">
                &nbsp;
            </div>

        </div>
        <br />

        <div class="row text-center">
            <button pButton icon="fa fa-check" [label]="'save'|translate:lang" type="submit" class="ui-button-primary"
                style="margin-right: 5px;"></button>
            <button pButton icon="fa fa-close" [label]="'cancel'|translate:lang" type="button" class="ui-button-danger"
                (click)="hidePanel()"></button>
        </div>


    </form>

</p-dialog>

<app-sff-izvor-finansiranja-lov [fgVisible]="fgVisibleSffIzvorFinansiranjaLovModalPanel"
    (hideModalPanel)="onHideLovIzvorFinansiranja($event);">
</app-sff-izvor-finansiranja-lov>

<app-sff-mesto-troska-lov-modal-panel [fgVisible]="fgVisibleSffMestoTroskaLovModalPanel"
    (hideModalPanel)="onHideLovMestoTroska($event);">
</app-sff-mesto-troska-lov-modal-panel>