@pega/dx-component-builder-sdk

Version:
Utility for building custom UI components
35 lines (34 loc) • 1.28 kB
HTML
<div *ngIf="displayMode$; else noDisplayMode">
  <component-mapper
    *ngIf="bVisible$ !== false"
    name="FieldValueList"
    [props]="{ label$, value$: this.localizedValue, displayMode$ }"
  ></component-mapper>
</div>
<ng-template #noDisplayMode>
  <div [formGroup]="formGroup$" *ngIf="bVisible$">
    <mat-form-field class="psdk-radio-form" subscriptSizing="dynamic" [hintLabel]="helperText">
      <mat-label>{{ label$ }}</mat-label>
      <input matInput [placeholder]="placeholder" style="display: none" [required]="bRequired$" />
      <mat-radio-group
        [value]="value$"
        [required]="bRequired$"
        [formControl]="fieldControl"
        [attr.data-test-id]="testId"
        (change)="fieldOnChange($event)"
        class="{{ bInline$ ? 'psdk-radio-horizontal' : 'psdk-radio-vertical' }}"
      >
        <mat-radio-button
          *ngFor="let opt of options$"
          [checked]="isSelected(opt.key)"
          [disabled]="bDisabled$ || bReadonly$"
          [value]="opt.key"
          class="psdk-radio-button"
        >
          {{ getLocalizedOptionValue(opt) }}
        </mat-radio-button>
      </mat-radio-group>
      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
    </mat-form-field>
  </div>
</ng-template>