D-Net

<div [formGroup]="templateForm">

  <div class="p-fluid p-formgrid"

       [ngClass]="{'p-grid': !dialogLayout}">

    <div class="p-field"

          *ngIf="!excludedFormControls?.includes('documentClassification')"

          [ngClass]="{'p-col-12 p-lg-4': !dialogLayout}">

      <label for="documentClassification">

        Document Classification

      </label>

      <p-dropdown inputId="documentClassification"

                  [options]="documentClassificationsList"

                  optionLabel="classificationName"

                  placeholder="Select"

                  formControlName="documentClassification"

                  (onChange)="documentClassificationSelected($event.value)"

                  [showClear]="true">

      </p-dropdown>

      <app-validation-message [control]="templateForm.get('documentClassification')"

                              [validationMessage]="'This field is required.'"

                              [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

      </app-validation-message>

    </div>

    <div class="p-field"

         *ngIf="!excludedFormControls?.includes('categoryName')"

         [ngClass]="{'p-col-12 p-lg-4': !dialogLayout}">

      <label for="categoryName">

        Category Name

      </label>

      <p-autoComplete id="categoryName"

                      formControlName="categoryName"

                      [suggestions]="categoryNameSuggestions"

                      [forceSelection]="true"

                      (completeMethod)="autosuggestCategoryName($event)"

                      (onSelect)="categoryNameSelected($event)">

      </p-autoComplete>

      <app-validation-message [control]="templateForm.get('categoryName')"

                              [validationMessage]="'This field is required.'"

                              [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

      </app-validation-message>

    </div>

    <div class="p-field"

         *ngIf="!excludedFormControls?.includes('categoryName')"

         [ngClass]="{'p-col-12 p-lg-4': !dialogLayout}">

      <label for="categoryCode">

        Category Code

      </label>

      <p-autoComplete id="categoryCode"

                      formControlName="categoryCode"

                      [suggestions]="categoryCodeSuggestions"

                      [forceSelection]="true"

                      (completeMethod)="autosuggestCategoryCode($event)"

                      (onSelect)="categoryCodeSelected($event)">

      </p-autoComplete>

      <app-validation-message [control]="templateForm.get('categoryCode')"

                              [validationMessage]="'This field is required.'"

                              [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

      </app-validation-message>

    </div>

    <div class="p-field"

          *ngIf="!excludedFormControls?.includes('iPowerClient')"

          [ngClass]="{'p-col-12 p-lg-4': !dialogLayout}">

      <label for="iPowerClientName">

        iPower Client Name

      </label>

      <p-autoComplete id="iPowerClientName"

                      formControlName="iPowerClientName"

                      [suggestions]="iPowerClientNameSuggestions"

                      [forceSelection]="true"

                      (completeMethod)="autosuggestIPowerClientName($event)"

                      (onSelect)="iPowerClientNameSelected($event)">

      </p-autoComplete>

      <app-validation-message [control]="templateForm.get('iPowerClientName')"

                              [validationMessage]="'This field is required.'"

                              [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

      </app-validation-message>

    </div>

    <div class="p-field"

          *ngIf="!excludedFormControls?.includes('iPowerClient')"

          [ngClass]="{'p-col-12 p-lg-4': !dialogLayout}">

      <label for="iPowerClientCode">

        iPower Client Code

      </label>

      <p-autoComplete id="iPowerClientCode"

                      formControlName="iPowerClientCode"

                      [suggestions]="iPowerClientCodeSuggestions"

                      [forceSelection]="true"

                      (completeMethod)="autosuggestIPowerClientCode($event)"

                      (onSelect)="iPowerClientCodeSelected($event)">

      </p-autoComplete>

      <app-validation-message [control]="templateForm.get('iPowerClientCode')"

                              [validationMessage]="'This field is required.'"

                              [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

      </app-validation-message>

    </div>

    <div class="p-field"

         *ngIf="!excludedFormControls?.includes('documentSubclassification')"

         [ngClass]="{'p-col-12 p-lg-4': !dialogLayout}">

      <label for="documentSubclassification">

        Sub-Category Name

      </label>

      <p-dropdown inputId="documentSubclassification"

                  [options]="availableDocumentSubclassifications"

                  [disabled]="subCategoryCodeDisabled"

                  optionLabel="subclassificationName"

                  placeholder="Select a Document Classification first"

                  formControlName="documentSubclassification">

      </p-dropdown>

      <app-validation-message [control]="templateForm.get('documentSubclassification')"

                              [validationMessage]="'This field is required.'"

                              [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

      </app-validation-message>

    </div>

    <div class="p-field"

         *ngIf="!excludedFormControls?.includes('abbyyTemplateCode')"

         [ngClass]="{'p-col-12 p-lg-4': !dialogLayout}">

      <label for="abbyyTemplateCode"

             >

        ABBYY Template Code

      </label>

      <input id="abbyyTemplateCode"

             type="text"

             pInputText

             formControlName="abbyyTemplateCode">

      <app-validation-message [control]="templateForm.get('abbyyTemplateCode')"

                              [validationMessage]="'This field is required.'"

                              [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

      </app-validation-message>

    </div>

  </div>

</div>