ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html

   1 <cd-loading-panel *ngIf="loading"
   2                   i18n>Loading...</cd-loading-panel>
   3
   4 <div class="cd-col-form">
   5   <form name="hostForm"
   6         *ngIf="!loading"
   7         #formDir="ngForm"
   8         [formGroup]="hostForm"
   9         novalidate>
  10     <div class="card">
  11       <div i18n="form title|Example: Create Pool@@formTitle"
  12            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
  13
  14       <div class="card-body">
  15
  16         <!-- Hostname -->
  17         <div class="form-group row">
  18           <label class="cd-col-form-label required"
  19                  for="hostname"
  20                  i18n>Hostname</label>
  21           <div class="cd-col-form-input">
  22             <input class="form-control"
  23                    type="text"
  24                    placeholder="mon-123"
  25                    id="hostname"
  26                    name="hostname"
  27                    formControlName="hostname"
  28                    autofocus>
  29             <span class="invalid-feedback"
  30                   *ngIf="hostForm.showError('hostname', formDir, 'required')"
  31                   i18n>This field is required.</span>
  32             <span class="invalid-feedback"
  33                   *ngIf="hostForm.showError('hostname', formDir, 'uniqueName')"
  34                   i18n>The chosen hostname is already in use.</span>
  35           </div>
  36         </div>
  37       </div>
  38
  39       <div class="card-footer">
  40         <div class="button-group text-right">
  41           <cd-submit-button [form]="formDir"
  42                             i18n="form action button|Example: Create Pool@@formActionButton"
  43                             (submitAction)="submit()">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
  44           <cd-back-button></cd-back-button>
  45         </div>
  46       </div>
  47     </div>
  48   </form>
  49 </div>