File

src/app/sys-check/questionnaire/questionnaire.component.ts

Implements

OnInit OnDestroy

Metadata

styleUrls ./questionnaire.component.css,
../sys-check.component.css
templateUrl ./questionnaire.component.html

Index

Properties
Methods

Constructor

constructor(ds: SysCheckDataService)
Parameters :
Name Type Optional
ds SysCheckDataService No

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Private updateReport
updateReport()
Returns : void

Properties

Public ds
Type : SysCheckDataService
form
Type : FormGroup
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>

./questionnaire.component.css

mat-radio-group mat-radio-button {
  margin-right: 1em;
  margin-bottom: 1em;
}

h3 {
  margin-bottom: 0
}

../sys-check.component.css

.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
Component
Html element with directive

result-matching ""

    No results matching ""