dynaform.component.html 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <ng-container *ngFor="let rowName of dynaFormRows">
  2. <ng-container *ngTemplateOutlet="template ? template : default; context: getTemplateContext(rowName)"></ng-container>
  3. </ng-container>
  4. <!-- Default template for form field
  5. used when a TemplateRef is NOT supplied to component -->
  6. <ng-template let-control="control" let-meta="meta" #default>
  7. <ng-container *ngIf="meta.type !== 'Hidden'">
  8. <ng-container *ngIf="!meta.noLabel; else fullWidth">
  9. <div *ngIf="isField(meta); else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
  10. <ng-container dynafield
  11. [control]="control"
  12. [meta]="meta"
  13. (call)="handleCallback($event)"
  14. ></ng-container>
  15. </div>
  16. </ng-container>
  17. <ng-template #recursiveDynaform>
  18. <ng-container *ngIf="isRepeatingContainer(meta); else container">
  19. <div *ngIf="meta.display === 'SINGLE'" class="row dyna-repeating-container-selector">
  20. <div class="clr-col-sm-4 text-right">
  21. <b>FOCUS &gt;</b>
  22. </div>
  23. <div class="clr-col-sm-8">
  24. <a *ngFor="let container of meta.meta; let i = index"
  25. class="btn btn-sm"
  26. [ngClass]="container.focussed ? 'btn-primary' : 'btn-outline-primary'"
  27. (click)="focusContainer(meta.name, i)">
  28. {{ getRCLabel(meta.name, i) }}
  29. </a>
  30. <a *ngIf="meta.showAddControl"
  31. class="btn btn-sm btn-outline-success"
  32. [ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
  33. (click)="addRCMember(meta.name)">
  34. + Add New
  35. </a>
  36. </div>
  37. </div>
  38. <div *ngFor="let container of meta.meta; let i = index" class="dyna-rc-container" [ngClass]="{ 'dyna-rc-display-all': meta.display === 'ALL' }">
  39. <div *ngIf="meta.showDeleteControl" class="text-right">
  40. <a [ngClass]="{ 'btn-disabled': !deleteRCMemberAllowed(meta.name) }"
  41. (click)="deleteRCMember(meta.name, i)">
  42. <i class="fa fa-trash"></i>
  43. </a>
  44. </div>
  45. <ng-container *ngTemplateOutlet="dynaform; context: getRCTemplateContext(meta.name, i)"></ng-container>
  46. </div>
  47. <div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="clr-row">
  48. <div class="clr-col-sm-12">
  49. <a class="btn btn-sm btn-outline-success"
  50. [ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
  51. (click)="addRCMember(meta.name)">
  52. + Add New
  53. </a>
  54. </div>
  55. </div>
  56. </ng-container>
  57. </ng-template>
  58. <ng-template #container>
  59. <ng-container *ngTemplateOutlet="dynaform; context: { control: control, meta: meta }"></ng-container>
  60. </ng-template>
  61. <ng-template #fullWidth>
  62. <ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
  63. </ng-template>
  64. </ng-container>
  65. </ng-template>
  66. <ng-template let-control="control" let-meta="meta" #dynaform>
  67. <div [ngClass]="getRowClass(control, meta)">
  68. <h3 *ngIf="meta.label" class="h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
  69. <app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" [ngClass]="{ 'dyna-hidden': !meta.focussed }" (call)="handleCallback($event)"></app-dynaform>
  70. </div>
  71. </ng-template>
  72. <!-- Display validation status if debugging and not nested -->
  73. <div *ngIf="debug && path.length === 0" [ngClass]="{
  74. 'alert-success' : formGroup.valid && formGroup.dirty,
  75. 'alert-danger' : !formGroup.valid && formGroup.dirty,
  76. 'alert-info' : !formGroup.dirty
  77. }"
  78. class="alert __debug"
  79. role="alert">
  80. <div class="alert-items">
  81. <pre class="alert-text" style="border: none;">{{ formGroup.pristine ? 'Untouched' : getValidationErrors() | json }}</pre>
  82. </div>
  83. </div>