ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container *ngIf="titleText"
   3                 class="modal-title">
   4     {{ titleText }}
   5   </ng-container>
   6   <ng-container class="modal-content">
   7     <form [formGroup]="formGroup"
   8           #formDir="ngForm"
   9           novalidate>
  10       <div class="modal-body">
  11         <p *ngIf="message">{{ message }}</p>
  12         <ng-container *ngFor="let field of fields">
  13           <div class="form-group row cd-{{field.name}}-form-group">
  14             <label *ngIf="field.label"
  15                    class="cd-col-form-label"
  16                    [ngClass]="{'required': field?.required === true}"
  17                    [for]="field.name">
  18               {{ field.label }}
  19             </label>
  20             <div [ngClass]="{'cd-col-form-input': field.label, 'col-sm-12': !field.label}">
  21               <input *ngIf="['text', 'number'].includes(field.type)"
  22                      [type]="field.type"
  23                      class="form-control"
  24                      [id]="field.name"
  25                      [name]="field.name"
  26                      [formControlName]="field.name">
  27               <input *ngIf="field.type === 'binary'"
  28                      type="text"
  29                      class="form-control"
  30                      [id]="field.name"
  31                      [name]="field.name"
  32                      [formControlName]="field.name"
  33                      cdDimlessBinary>
  34               <select *ngIf="field.type === 'select'"
  35                       class="form-select"
  36                       [id]="field.name"
  37                       [formControlName]="field.name">
  38                 <option *ngIf="field?.typeConfig?.placeholder"
  39                         [ngValue]="null">
  40                   {{ field?.typeConfig?.placeholder }}
  41                 </option>
  42                 <option *ngFor="let option of field?.typeConfig?.options"
  43                         [value]="option.value">
  44                   {{ option.text }}
  45                 </option>
  46               </select>
  47               <cd-select-badges *ngIf="field.type === 'select-badges'"
  48                                 [id]="field.name"
  49                                 [data]="field.value"
  50                                 [customBadges]="field?.typeConfig?.customBadges"
  51                                 [options]="field?.typeConfig?.options"
  52                                 [messages]="field?.typeConfig?.messages">
  53               </cd-select-badges>
  54               <span *ngIf="formGroup.showError(field.name, formDir)"
  55                     class="invalid-feedback">
  56                 {{ getError(field) }}
  57               </span>
  58             </div>
  59           </div>
  60         </ng-container>
  61       </div>
  62       <div class="modal-footer">
  63         <cd-form-button-panel (submitActionEvent)="onSubmitForm(formGroup.value)"
  64                               [form]="formGroup"
  65                               [submitText]="submitButtonText"></cd-form-button-panel>
  66       </div>
  67     </form>
  68   </ng-container>
  69 </cd-modal>