title: PrimeNG spinner required validation style not showing
body: <p>PrimeNG spinner input field is not properly showing required validation style(Input field is never marked with a red border).
  I'm using angular8 and primeng 8.0.2. Number field "iznosDuguje" is declared as a FormControl with validation - [Validators.required]. Form control is properly marked valid/invalid/dirty/etc, but the usual style(red border) is never shown on p-spinner. </p>
  
  <p>Screenshot of the validation(whole panel included):</p>
  
  <p><a href="https://prnt.sc/pn1u6k" rel="nofollow noreferrer">https://prnt.sc/pn1u6k</a></p>
  
  <p>//relevant .ts part - formControl initiation for "iznosDuguje"</p>
  
  <pre><code>//more code
  this.editPrpStavkaPlanaForm = new FormGroup({
        //more code
        'iznosDuguje': new FormControl(this.prpStavkaPlanaEdit.iznosDuguje? this.prpStavkaPlanaEdit.iznosDuguje : "", [Validators.required]),
        //more code
  </code></pre>
  
  <p>//relevant .html part - spinner "iznosDuguje" and validation messages</p>
  
  <pre><code>&lt;form [formGroup]="editPrpStavkaPlanaForm" (ngSubmit)="snimi()"&gt;
  //more code
          &lt;div class="ui-g"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="iznosDuguje" l10nTranslate&gt;prpStavkaPlanaRashodaIPrihoda.iznosDuguje&lt;/label&gt;
                  &lt;label&gt;*&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;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"&gt;
              &lt;/p-spinner&gt;
  
              &lt;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 &amp;&amp; editPrpStavkaPlanaForm.get('iznosDuguje').dirty &amp;&amp; editPrpStavkaPlanaForm.get('iznosDuguje').errors"&gt;
  
                  &lt;span
                      *ngIf="editPrpStavkaPlanaForm.get('iznosDuguje').errors &amp;&amp; editPrpStavkaPlanaForm.get('iznosDuguje').errors['required']"&gt;
                      &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                      &lt;label for="iznosDuguje" l10nTranslate&gt;validations.required&lt;/label&gt;
                  &lt;/span&gt;
  
              &lt;/div&gt;
  //more code
  </code></pre>
  
  <p>//full component.ts
  The field is declared within a FormGroup as FormControl:</p>
  
  <pre><code> 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&lt;boolean&gt;();
  
    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) =&gt; {
            this.ms.addSuccessMessage(this.translation.translate('prpEvidencijaPlanovaRashodaIPrihoda.snimanjePrpPlanRashodaPrihoda'), this.translation.translate('prpEvidencijaPlanovaRashodaIPrihoda.snimanjePrpPlanRashodaPrihodaUspesno'));
            this.hidePanel();
          },
          (error: HttpErrorResponse) =&gt; {
            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(() =&gt; { this.fgVisibleSffMestoTroskaLovModalPanel = false; });
    }
  
  
    public searchMestoTroska(event) {
  
      let sifra:string=event.query.trim();
      if(sifra.length&lt;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) =&gt; {
          this.sffMestoTroskas = response.content;
        },
        (error: HttpErrorResponse) =&gt; {
          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) =&gt; {
          this.sffIzvorFinansiranjas = response.content;
        },
        (error: HttpErrorResponse) =&gt; {
          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(() =&gt; { this.fgVisibleSffIzvorFinansiranjaLovModalPanel = false; });
    }
  
    markFormAsDirty() {
      Object.keys(this.editPrpStavkaPlanaForm.controls).forEach(key =&gt; {
        this.editPrpStavkaPlanaForm.get(key).markAsDirty();
      });
  
    }
  
  }
  
  </code></pre>
  
  <p>//full component.html</p>
  
  <pre><code>&lt;p-dialog [modal]="true" [contentStyle]="{'overflow':'visible'}" [(visible)]="fgVisible" (onShow)="onShow();"
      (onHide)="onHide()" [responsive]="true" [closeOnEscape]="false" focusFirstDirective&gt;
      &lt;p-header&gt;
          &lt;label *ngIf="fgUnos" l10nTranslate&gt;new&lt;/label&gt;
          &lt;label *ngIf="!fgUnos" l10nTranslate&gt;edit&lt;/label&gt;
      &lt;/p-header&gt;
  
      &lt;form [formGroup]="editPrpStavkaPlanaForm" (ngSubmit)="snimi()"&gt;
  
          &lt;div class="ui-g"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="brojKonta" l10nTranslate&gt;prpStavkaPlanaRashodaIPrihoda.brojKonta&lt;/label&gt;
                  &lt;label&gt;*&lt;/label&gt;
              &lt;/div&gt;
              &lt;input #brojKonta class="ui-md-4 ui-sm-6 first" pInputText type="text" id="brojKonta" name="brojKonta"
                  formControlName="brojKonta" maxlength="20" /&gt;
              &lt;div class="ui-md-4 ui-sm-12 ui-message ui-messages-error ui-corner-all"
                  *ngIf="!editPrpStavkaPlanaForm.get('brojKonta').valid &amp;&amp; editPrpStavkaPlanaForm.get('brojKonta').dirty &amp;&amp; editPrpStavkaPlanaForm.get('brojKonta').errors"&gt;
  
                  &lt;span
                      *ngIf="editPrpStavkaPlanaForm.get('brojKonta').errors &amp;&amp; editPrpStavkaPlanaForm.get('brojKonta').errors['required']"&gt;
                      &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                      &lt;label for="brojKonta" l10nTranslate&gt;validations.required&lt;/label&gt;
                  &lt;/span&gt;
  
                  &lt;span
                      *ngIf="editPrpStavkaPlanaForm.get('brojKonta').errors &amp;&amp; editPrpStavkaPlanaForm.get('brojKonta').errors['emptyRequiredField']"&gt;
                      &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                      &lt;label for="brojKonta" l10nTranslate&gt;validations.emptyRequiredField&lt;/label&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="ui-g"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="iznosDuguje" l10nTranslate&gt;prpStavkaPlanaRashodaIPrihoda.iznosDuguje&lt;/label&gt;
                  &lt;label&gt;*&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;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"&gt;
              &lt;/p-spinner&gt;
  
              &lt;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 &amp;&amp; editPrpStavkaPlanaForm.get('iznosDuguje').dirty &amp;&amp; editPrpStavkaPlanaForm.get('iznosDuguje').errors"&gt;
  
                  &lt;span
                      *ngIf="editPrpStavkaPlanaForm.get('iznosDuguje').errors &amp;&amp; editPrpStavkaPlanaForm.get('iznosDuguje').errors['required']"&gt;
                      &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                      &lt;label for="iznosDuguje" l10nTranslate&gt;validations.required&lt;/label&gt;
                  &lt;/span&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="ui-g"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="iznosPotrazuje" l10nTranslate&gt;prpStavkaPlanaRashodaIPrihoda.iznosPotrazuje&lt;/label&gt;
                  &lt;label&gt;*&lt;/label&gt;
              &lt;/div&gt;
              &lt;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"&gt;&lt;/p-spinner&gt;
  
              &lt;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 &amp;&amp; editPrpStavkaPlanaForm.get('iznosPotrazuje').dirty &amp;&amp; editPrpStavkaPlanaForm.get('iznosPotrazuje').errors"&gt;
  
                  &lt;span
                      *ngIf="editPrpStavkaPlanaForm.get('iznosPotrazuje').errors &amp;&amp; editPrpStavkaPlanaForm.get('iznosPotrazuje').errors['required']"&gt;
                      &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                      &lt;label for="iznosPotrazuje" l10nTranslate&gt;validations.required&lt;/label&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="ui-g" style="margin-bottom: 5px;"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="izvorFinansiranja" translate&gt;prpStavkaPlanaRashodaIPrihoda.izvorFinansiranja&lt;/label&gt;
              &lt;/div&gt; 
              &lt;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"&gt;
                  &lt;ng-template let-value pTemplate="item"&gt; 
                      &lt;span&gt;{{value.internaSifra}}&lt;/span&gt;
                  &lt;/ng-template&gt;
              &lt;/p-autoComplete&gt;
              &lt;div class="ui-sm-2 ui-md-1"&gt;
                  &lt;button icon="fa fa-list" style="margin-right: 3px;" pButton (click)="onShowLovIzvorFinansiranja()"
                      type="button" [title]="'choose'|translate:lang"&gt;&lt;/button&gt;
                  &lt;button pButton icon="fa fa-close" [title]="'delete'|translate:lang" type="button"
                      class="ui-button-danger" (click)="resetIzvorFinansiranja()"&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="ui-g" style="margin-bottom: 5px;"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="mestoTroska" translate&gt;prpStavkaPlanaRashodaIPrihoda.mestoTroska&lt;/label&gt;
              &lt;/div&gt;
              &lt;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"&gt;
                  &lt;ng-template let-value pTemplate="item"&gt;
                          &lt;span&gt;{{value.sifra}}&lt;/span&gt;
                      &lt;/ng-template&gt;
              &lt;/p-autoComplete&gt;
              &lt;div class="ui-sm-2 ui-md-1"&gt;
                  &lt;button icon="fa fa-list" style="margin-right: 3px;" pButton (click)="onShowLovMestoTroska()"
                      type="button" [title]="'choose'|translate:lang"&gt;&lt;/button&gt;
                  &lt;button pButton icon="fa fa-close" [title]="'delete'|translate:lang" type="button"
                      class="ui-button-danger" (click)="resetMestoTroska()"&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- &lt;div class="ui-g" style="margin-bottom: 5px;"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label&gt;"ss"&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="ui-md-4 ui-sm-6"&gt;
                  &lt;input readonly="true" [(ngModel)]= "selectedSffMestoTroska? selectedSffMestoTroska.naziv: selectedSffMestoTroska " [ngModelOptions]="{standalone: true}" /&gt;
              &lt;/div&gt;
          &lt;/div&gt; --&gt;
  
          &lt;div class="ui-g"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="namena" l10nTranslate&gt;core.namena&lt;/label&gt;
                  &lt;label&gt;*&lt;/label&gt;
              &lt;/div&gt;
              &lt;textarea #namena class="ui-md-10 ui-sm-6" pInputTextarea type="text" id="namena" name="namena"
                  formControlName="namena" maxlength="512"&gt;&lt;/textarea&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-left"&gt;
                  &amp;nbsp;
              &lt;/div&gt;
              &lt;div class="ui-md-10 ui-sm-6 ui-message ui-messages-error ui-corner-all"
                  *ngIf="!editPrpStavkaPlanaForm.get('namena').valid &amp;&amp; editPrpStavkaPlanaForm.get('namena').dirty &amp;&amp; editPrpStavkaPlanaForm.get('namena').errors"&gt;
                  &lt;span
                      *ngIf="editPrpStavkaPlanaForm.get('namena').errors &amp;&amp; editPrpStavkaPlanaForm.get('namena').errors['required']"&gt;
                      &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                      &lt;label for="namena" l10nTranslate&gt;validations.required&lt;/label&gt;
                  &lt;/span&gt;
                  &lt;span
                      *ngIf="editPrpStavkaPlanaForm.get('namena').errors &amp;&amp; editPrpStavkaPlanaForm.get('namena').errors['emptyRequiredField']"&gt;
                      &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                      &lt;label for="namena" l10nTranslate&gt;validations.emptyRequiredField&lt;/label&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="ui-g"&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-right"&gt;
                  &lt;label for="napomena" l10nTranslate&gt;core.napomena&lt;/label&gt;
              &lt;/div&gt;
              &lt;textarea #napomena class="ui-md-10 ui-sm-6" pInputTextarea type="text" id="napomena" name="napomena"
                  formControlName="napomena" maxlength="512"&gt;&lt;/textarea&gt;
              &lt;div class="ui-md-2 ui-sm-6 text-left"&gt;
                  &amp;nbsp;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;br /&gt;
  
          &lt;div class="row text-center"&gt;
              &lt;button pButton icon="fa fa-check" [label]="'save'|translate:lang" type="submit" class="ui-button-primary"
                  style="margin-right: 5px;"&gt;&lt;/button&gt;
              &lt;button pButton icon="fa fa-close" [label]="'cancel'|translate:lang" type="button" class="ui-button-danger"
                  (click)="hidePanel()"&gt;&lt;/button&gt;
          &lt;/div&gt;
  
  
      &lt;/form&gt;
  
  &lt;/p-dialog&gt;
  
  &lt;app-sff-izvor-finansiranja-lov [fgVisible]="fgVisibleSffIzvorFinansiranjaLovModalPanel"
      (hideModalPanel)="onHideLovIzvorFinansiranja($event);"&gt;
  &lt;/app-sff-izvor-finansiranja-lov&gt;
  
  &lt;app-sff-mesto-troska-lov-modal-panel [fgVisible]="fgVisibleSffMestoTroskaLovModalPanel"
      (hideModalPanel)="onHideLovMestoTroska($event);"&gt;
  &lt;/app-sff-mesto-troska-lov-modal-panel&gt;
  </code></pre>