File
Implements
Metadata
styleUrls |
./questionnaire.component.css, ../sys-check.component.css |
templateUrl |
./questionnaire.component.html |
Methods
ngOnDestroy
|
ngOnDestroy()
|
|
|
Private
updateReport
|
updateReport()
|
|
|
Private
valueChangesSubscription
|
Type : Subscription
|
Default value : null
|
|
import { FormControl, FormGroup } from '@angular/forms';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { SysCheckDataService } from '../sys-check-data.service';
@Component({
templateUrl: './questionnaire.component.html',
styleUrls: ['./questionnaire.component.css', '../sys-check.component.css']
})
export class QuestionnaireComponent implements OnInit, OnDestroy {
form: FormGroup;
private valueChangesSubscription: Subscription = null;
constructor(
public ds: SysCheckDataService
) {
}
ngOnInit(): void {
setTimeout(() => {
this.ds.setNewCurrentStep('q');
const group = {};
if (this.ds.checkConfig) {
this.ds.checkConfig.questions.forEach(question => {
group[question.id] = new FormControl('');
});
this.form = new FormGroup(group);
this.ds.questionnaireReport.forEach(reportEntry => {
const formControl = this.form.controls[reportEntry.id];
if (formControl) {
formControl.setValue(reportEntry.value);
}
});
this.valueChangesSubscription = this.form.valueChanges.subscribe(() => { this.updateReport(); });
}
});
}
ngOnDestroy(): void {
if (this.valueChangesSubscription !== null) {
this.valueChangesSubscription.unsubscribe();
}
}
private updateReport() {
this.ds.questionnaireReport = [];
if (this.ds.checkConfig) {
this.ds.checkConfig.questions.forEach(element => {
if (element.type !== 'header') {
const formControl = this.form.controls[element.id];
if (formControl) {
this.ds.questionnaireReport.push({
id: element.id,
type: element.type,
label: element.prompt,
value: formControl.value,
// eslint-disable-next-line max-len
warning: (['string', 'select', 'radio', 'text'].indexOf(element.type) > -1) && (formControl.value === '') && (element.required)
});
}
}
});
}
}
}
<div class="sys-check-body">
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<mat-card fxFlex="0 0 700px">
<mat-card-header>
<mat-card-title>Fragen</mat-card-title>
<mat-card-subtitle>{{'Bitte bearbeiten Sie die nachfolgenden Fragen.'| customtext:'syscheck_questionsintro' | async}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div #questionnaireBody>
<div [formGroup]="form" class="formList" fxLayout="column" *ngIf="form">
<div *ngFor="let q of ds.checkConfig?.questions">
<div [ngSwitch]="q.type" class="formEntry" fxLayout="column" fxLayoutGap="5px">
<h3 *ngSwitchCase="'header'">{{ q.prompt }}{{ q.value }}</h3>
<mat-form-field *ngSwitchCase="'text'">
<p>{{q.prompt}}</p>
<textarea matInput [formControlName]="q.id" [id]="q.id" cdkTextareaAutosize cdkAutosizeMinRows="2" class="formEntry"></textarea>
</mat-form-field>
<mat-form-field *ngSwitchCase="'string'">
<p>{{q.prompt}}</p>
<input matInput [formControlName]="q.id" [id]="q.id" class="formEntry">
</mat-form-field>
<mat-form-field *ngSwitchCase="'select'">
<p>{{q.prompt}}</p>
<mat-select [id]="q.id" [formControlName]="q.id" class="formEntry">
<mat-option *ngFor="let opt of q.options" [value]="opt">
{{opt}}
</mat-option>
</mat-select>
</mat-form-field>
<div *ngSwitchCase="'check'">
<p *ngIf="q.prompt.length > 0">{{q.prompt}}</p>
<mat-checkbox *ngSwitchCase="'check'" [formControlName]="q.id" [id]="q.id">{{q.value}}</mat-checkbox>
</div>
<div *ngSwitchCase="'radio'">
<p>{{q.prompt}}</p>
<mat-radio-group [id]="q.id" [formControlName]="q.id" [name]="q.id">
<mat-radio-button *ngFor="let opt of q.options" [value]="opt" class="formEntry">
{{opt}}
</mat-radio-button>
</mat-radio-group>
</div>
<p *ngSwitchDefault>Unbekannter Control-Typ: {{q.type}} für Element-ID {{q.id}}</p>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
mat-radio-group mat-radio-button {
margin-right: 1em;
margin-bottom: 1em;
}
h3 {
margin-bottom: 0
}
.sys-check-body {
position: absolute;
width: 100%;
}
mat-card {
margin: 10px;
}
#header {
position: absolute;
width: 100%;
padding-top: 10px;
color: white;
z-index: 444;
}
button {
margin-left: 15px;
}
#header .material-icons {
/* font-size: 2.0rem; */
position: relative;
top: -8px;
font-size: 36px;
padding: 2px;
}
Legend
Html element with directive