D-Net

<div [formGroup]="verificationRuleForm">

  <div class="p-fluid"

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

    <div class="p-grid">

      <div class="p-field p-col-12 p-lg-6">

        <label for="document-classification">

          Document Classification

        </label>

        <p-dropdown inputId="document-classification"

                    [options]="documentClassificationsList"

                    optionLabel="classificationName"

                    placeholder="Select"

                    formControlName="documentClassification"

                    [disabled]="editMode"

                    (onChange)="documentClassificationSelected($event)">

        </p-dropdown>

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

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

    </div>

    <div class="p-grid">

      <div class="p-field p-col-12 p-lg-6">

        <label for="ipower-name">

          iPower Client Name

        </label>

        <p-autoComplete id="ipower-name"

                        formControlName="ipowerName"

                        [suggestions]="iPowerClientNameSuggestions"

                        [forceSelection]="true"

                        (completeMethod)="autosuggestIPowerClientName($event)"

                        [disabled]="editMode"

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

        </p-autoComplete>

        <app-validation-message [control]="verificationRuleForm.get('ipowerName')"

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

      <div class="p-field p-col-12 p-lg-6">

        <label for="ipower-code">

          iPower Client Code

        </label>

        <p-autoComplete id="ipower-code"

                        formControlName="ipowerCode"

                        [suggestions]="iPowerClientCodeSuggestions"

                        [forceSelection]="true"

                        (completeMethod)="autosuggestIPowerClientCode($event)"

                        [disabled]="editMode"

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

        </p-autoComplete>

        <app-validation-message [control]="verificationRuleForm.get('ipowerCode')"

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

          [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

    </div>

    <div class="p-grid">

      <div class="p-field p-col-12 p-lg-6">

        <label for="category-name">

          Category Name

        </label>

        <p-autoComplete id="category-name"

                        formControlName="categoryName"

                        [suggestions]="categoryNameSuggestions"

                        [forceSelection]="true"

                        (completeMethod)="autosuggestCategoryName($event)"

                        [disabled]="editMode"

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

        </p-autoComplete>

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

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

      <div class="p-field p-col-12 p-lg-6">

        <label for="category-code">

          Category Code

        </label>

        <p-autoComplete id="category-code"

                        formControlName="categoryCode"

                        [suggestions]="categoryCodeSuggestions"

                        [forceSelection]="true"

                        (completeMethod)="autosuggestCategoryCode($event)"

                        [disabled]="editMode"

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

        </p-autoComplete>

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

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

    </div>

    <div class="p-grid">

      <div class="p-field p-col-12 p-lg-6">

        <label for="document-subclassification">

          Sub-Category Name

        </label>

        <p-dropdown inputId="document-subclassification"

                    [options]="availableDocumentSubclassifications"

                    [disabled]="subCategoryCodeDisabled || editMode"

                    optionLabel="subclassificationName"

                    placeholder="Select a Document Classification first"

                    formControlName="subCategoryCode">

        </p-dropdown>

        <app-validation-message [control]="verificationRuleForm.get('subCategoryCode')"

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

    </div>

    <div class="p-grid"

         [ngClass]="{'p-pt-4': (initiallySetFormValue && initiallySetFormValue.id)}">

      <div class="p-field p-col-12 p-lg-6">

        <label for="capturing-verification">

          Capturing Verification

        </label>

        <p-dropdown inputId="capturing-verification"

                    formControlName="capturingVerification"

                    [options]="capturingVerificationsList"

                    optionLabel="capturingVerificationName"

                    placeholder="Select">

        </p-dropdown>

        <app-validation-message [control]="verificationRuleForm.get('capturingVerification')"

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

      <div class="p-field p-col-12 p-lg-6">

        <label for="journal-verification">

          Journal Verification

        </label>

        <p-dropdown inputId="journal-verification"

                    formControlName="journalVerification"

                    [options]="journalVerificationsList"

                    optionLabel="journalVerificationName"

                    placeholder="Select">

        </p-dropdown>

        <app-validation-message [control]="verificationRuleForm.get('journalVerification')"

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

    </div>

    <div class="p-grid">

      <div class="p-field p-col-12 p-lg-6">

        <label for="confidence-level">

          Confidence Level

        </label>

        <input id="confidence-level"

               type="number"

               pInputText

               formControlName="confidenceLevelMinThreshold">

        <app-validation-message [control]="verificationRuleForm.get('confidenceLevelMinThreshold')"

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

      <div class="p-field p-col-12 p-lg-6">

        <label for="alteryx-routine-id">

          Alteryx Routine Name

        </label>

        <input id="alteryx-routine-id"

               type="text"

               pInputText

               formControlName="alteryxRoutineId">

        <app-validation-message [control]="verificationRuleForm.get('alteryxRoutineId')"

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

                                [displayEvenIfPristine]="displayValidationMessagesEvenIfPristine">

        </app-validation-message>

      </div>

    </div>

    <div class="p-grid p-jc-center" *ngIf="editMode">

      <div class="p-field p-col-5 p-m-2">

      </div>

      <div class="p-field p-col-5 p-m-2">

        <p-checkbox id="verification-rule-status" name="verification-rule-status"

          [formControl]="verificationRuleForm.get('verificationRuleStatus')" binary="true" label="Rule Status"

          [disabled]="!canEditRuleStatus()">

        </p-checkbox>

      </div>

    </div>

  </div>

</div>