import ceph quincy 17.2.6

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

<cd-modal [modalRef]="activeModal">
  <ng-container *ngIf="titleText"
                class="modal-title">
    {{ titleText }}
  </ng-container>
  <ng-container class="modal-content">
    <form [formGroup]="formGroup"
          #formDir="ngForm"
          novalidate>
      <div class="modal-body">
        <p *ngIf="message">{{ message }}</p>
        <ng-container *ngFor="let field of fields">
          <div class="form-group row cd-{{field.name}}-form-group">
            <label *ngIf="field.label"
                   class="cd-col-form-label"
                   [ngClass]="{'required': field?.required === true}"
                   [for]="field.name">
              {{ field.label }}
            </label>
            <div [ngClass]="{'cd-col-form-input': field.label, 'col-sm-12': !field.label}">
              <input *ngIf="['text', 'number'].includes(field.type)"
                     [type]="field.type"
                     class="form-control"
                     [id]="field.name"
                     [name]="field.name"
                     [formControlName]="field.name">
              <input *ngIf="field.type === 'binary'"
                     type="text"
                     class="form-control"
                     [id]="field.name"
                     [name]="field.name"
                     [formControlName]="field.name"
                     cdDimlessBinary>
              <select *ngIf="field.type === 'select'"
                      class="form-select"
                      [id]="field.name"
                      [formControlName]="field.name">
                <option *ngIf="field?.typeConfig?.placeholder"
                        [ngValue]="null">
                  {{ field?.typeConfig?.placeholder }}
                </option>
                <option *ngFor="let option of field?.typeConfig?.options"
                        [value]="option.value">
                  {{ option.text }}
                </option>
              </select>
              <cd-select-badges *ngIf="field.type === 'select-badges'"
                                [id]="field.name"
                                [data]="field.value"
                                [customBadges]="field?.typeConfig?.customBadges"
                                [options]="field?.typeConfig?.options"
                                [messages]="field?.typeConfig?.messages">
              </cd-select-badges>
              <span *ngIf="formGroup.showError(field.name, formDir)"
                    class="invalid-feedback">
                {{ getError(field) }}
              </span>
            </div>
          </div>
        </ng-container>
      </div>
      <div class="modal-footer">
        <cd-form-button-panel (submitActionEvent)="onSubmitForm(formGroup.value)"
                              [form]="formGroup"
                              [submitText]="submitButtonText"></cd-form-button-panel>
      </div>
    </form>
  </ng-container>
</cd-modal>