sebse/angulardynformmodule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added validation, error messages, help tooptips, async question loading and textarea input

Browse Source
This commit is contained in:
Sebastian Seedorf
2017-06-02 17:36:32 +02:00
parent fe28064e10
commit 006f618c36
16 changed files with 877 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/app/modules/dyn-form/dyn-question.component.ts
View File

@@ -1,27 +1,38 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {QuestionInterface} from './types/question.interface';
import {FormGroup} from '@angular/forms';
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}}</label>
<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>
</div>
<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 {
@@ -29,8 +40,26 @@ export class DynQuestionComponent {
@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() {
this.onChange.emit();
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);
}
}