66 lines
3.0 KiB
TypeScript
66 lines
3.0 KiB
TypeScript
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
|
import {QuestionInterface} from './types/question.interface';
|
|
import {FormGroup, ValidationErrors} from '@angular/forms';
|
|
|
|
@Component({
|
|
selector: 'dyn-question',
|
|
template: `
|
|
<div [ngSwitch]="question.type" [formGroup]="form">
|
|
<label [for]="question.properties.key">{{question.properties.label ? question.properties.label + (question.constraints.optional ? '' : ' *') : ''}}</label>
|
|
<i [hidden]="question.description" class="help circle icon" (mouseover)="onHover(true)" (mouseout)="onHover(false)">Help</i>
|
|
<a [hidden]="!hoverState" class="ui pointing red basic label">{{question.description}}</a><br>
|
|
|
|
<tag-input *ngSwitchCase="'flag'"
|
|
[formControlName]="question.properties.key" [id]="question.properties.key"
|
|
[nullable]="question.constraints.optional" [readonly]="type=='view'"
|
|
[items]="question.properties.options"
|
|
(ngModelChange)="change()"></tag-input>
|
|
<hidden-input *ngSwitchCase="'hidden'"
|
|
[formControlName]="question.properties.key" [id]="question.properties.key"
|
|
[nullable]="question.constraints.optional" [readonly]="type=='view'"
|
|
(ngModelChange)="change()"></hidden-input>
|
|
<dropdown-input *ngSwitchCase="'dropdown'"
|
|
[formControlName]="question.properties.key" [id]="question.properties.key"
|
|
[nullable]="question.constraints.optional" [readonly]="type=='view'"
|
|
[items]="question.properties.options"
|
|
(ngModelChange)="change()"></dropdown-input>
|
|
<textarea-input *ngSwitchCase="'textbox'"
|
|
[formControlName]="question.properties.key" [id]="question.properties.key"
|
|
[nullable]="question.constraints.optional" [readonly]="type=='view'"
|
|
(ngModelChange)="change()"></textarea-input>
|
|
|
|
<ul [hidden]="!errorList.length">
|
|
<li *ngFor="let error of errorList">{{error}}</li>
|
|
</ul>
|
|
</div>
|
|
`
|
|
})
|
|
export class DynQuestionComponent {
|
|
@Input() question: QuestionInterface;
|
|
@Input() type: "'insert'|'update'|'delete'|'view'";
|
|
@Input() form: FormGroup;
|
|
@Output() onChange: EventEmitter<any> = new EventEmitter<any>();
|
|
public hoverState: any = false;
|
|
private errorList: Array<string> = [];
|
|
|
|
onHover(state: boolean) {
|
|
this.hoverState = state;
|
|
}
|
|
|
|
change() {
|
|
setTimeout(() => {
|
|
this.errorList = [];
|
|
let control = this.form.controls[this.question.properties.key];
|
|
if (control.untouched || control.valid)
|
|
return null;
|
|
let errors: ValidationErrors = control.errors;
|
|
for (let key in errors) {
|
|
if (errors.hasOwnProperty(key)) {
|
|
this.errorList.push(errors[key].message);
|
|
}
|
|
}
|
|
this.onChange.emit();
|
|
}, 0);
|
|
}
|
|
}
|