- <h4 [class.text-danger]="!formIsValid && !isVisible.json" [class.default-cursor]="formIsValid || isVisible.json"
- (click)="toggleVisible('json')">
- <mat-icon matTooltip="Json">{{isVisible.json ? 'expand_less' : 'expand_more'}}</mat-icon>
- Json
- </h4>
- <div *ngIf="isVisible.json" fxLayout="column" [@expandSection]="true">
- <div>
- <strong *ngIf="formIsValid || prettyValidationErrors" [class.text-muted]="formIsValid"
- [class.text-danger]="!formIsValid">
- {{formIsValid ? 'Json' : 'Not valid'}}
- </strong>
- <span *ngIf="!formIsValid && !prettyValidationErrors">Invalid form</span>
- <span *ngIf="prettyValidationErrors">— errors:</span>
- <div *ngIf="prettyValidationErrors" class="text-danger" [innerHTML]="prettyValidationErrors"></div>
- </div>
- <div>
- <pre [class.text__dark]="this.darkMode">{{prettyLiveFormData}}</pre>
- </div>
- </div>
-
- <h4 class="default-cursor" (click)="toggleVisible('schema')">
- <mat-icon matTooltip="Json Schema">{{isVisible.schema ? 'expand_less' : 'expand_more'}}</mat-icon>
- Json Schema
- </h4>
- <div *ngIf="isVisible.schema" fxLayout="column" [@expandSection]="true">
- <strong class="text-muted">Schema</strong>
- <pre [class.text__dark]="this.darkMode">{{schemaAsString}}</pre>
- </div>