gerrit.onap Code Review - usecase-ui.git/blob

   1 <nz-modal
   2   [(nzVisible)]="cloudLeasedLineShowFlag"
   3   nzTitle="Create Cloud Leased Line"
   4   (nzOnCancel)="cancel()"
   5   nzWidth="70%"
   6   [nzFooter]="modalFooter"
   7 >
   8   <div class="subnet_params_container">
   9     <form nz-form>
  10         <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
  11             <nz-form-label
  12               [nzSpan]="7"
  13               [nzRequired]="item.required"
  14               [nzFor]=" item.key"
  15             >
  16                 {{ item.title }}
  17             </nz-form-label>
  18             <nz-form-control [nzSpan]="10">
  19               <div *ngIf="item.type === 'text'">{{cloud_leased_line_info[item.key]}}</div>
  20               <nz-tooltip
  21                 [nzTitle]="item.scoped && item.scopedText ? item.scopedText : ''"
  22                 [nzPlacement]="'right'"
  23                 [nzTrigger]="'focus'"
  24               >
  25                 <input
  26                   nz-input
  27                   nz-tooltip
  28                   [id]="item.key"
  29                   [name]="item.key"
  30                   *ngIf="item.type === 'input'"
  31                   [(ngModel)]="cloud_leased_line_info[item.key]"
  32                   [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
  33                   [placeholder]="item.placeholder ? item.placeholder : ''"
  34                   (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
  35                 />
  36               </nz-tooltip>
  37               <nz-select
  38                 [name]="item.key"
  39                 [(ngModel)]="cloud_leased_line_info[item.key]"
  40                 *ngIf="item.type === 'select'"
  41               >
  42                 <nz-option
  43                   [nzValue]="option"
  44                   [nzLabel]="option"
  45                   *ngFor="let option of cloudPointOptions"
  46                 >
  47                 </nz-option>
  48               </nz-select>
  49               <div *ngIf="item.type === 'node_select_one'">
  50                 <div>
  51                   <span>{{item.rateName}}:</span>
  52                   <input
  53                     nz-input
  54                     nz-tooltip
  55                     [id]="item.key"
  56                     [name]="item.key"
  57                     [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
  58                     [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
  59                     [placeholder]="item.placeholder ? item.placeholder : ''"
  60                     (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
  61                   />
  62                 </div>
  63                 <div>
  64                   <span>{{item.nodeName}}:</span>
  65                   <nz-select
  66                     [name]="item.key"
  67                     [(ngModel)]="cloud_leased_line_info[item.key].name"
  68                   >
  69                     <nz-option
  70                       [nzValue]="option"
  71                       [nzLabel]="option"
  72                       *ngFor="let option of nodeLists"
  73                     >
  74                     </nz-option>
  75                   </nz-select>
  76                 </div>
  77               </div>
  78             </nz-form-control>
  79         </nz-form-item>
  80     </form>
  81   </div>
  82   <ng-template #modalFooter>
  83     <button nz-button nzType="default" (click)="cancel()">Cancel</button>
  84     <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button>
  85   </ng-template>
  86 </nz-modal>