You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
frontend/src/app/components/nodes/form-input/form-input.component.html

101 lines
3.6 KiB

<ion-item
*ngIf="this.node
&& (
this.node.type === 'form_input_text'
|| this.node.type === 'form_input_number'
|| this.node.type === 'form_input_password'
|| this.node.type === 'form_input_email'
|| this.node.type === 'form_input_select'
|| this.node.type === 'form_input_multiselect'
|| this.node.type === 'form_input_textarea'
)"
>
<ion-label [position]="'floating'" *ngIf="this.node.AdditionalData.label">
{{ this.node.AdditionalData.label }}
</ion-label>
<ion-input
*ngIf="this.node.type === 'form_input_text'"
[(ngModel)]="value"
[placeholder]="this.node.AdditionalData.placeholder"
[required]="this.node.AdditionalData.required"
[readonly]="this.isReadonly"
(ionChange)="triggerChangeCheck()"
></ion-input>
<ion-input
*ngIf="this.node.type === 'form_input_number'"
[(ngModel)]="value"
[type]="'number'"
[placeholder]="this.node.AdditionalData.placeholder"
[required]="this.node.AdditionalData.required"
[readonly]="this.isReadonly"
(ionChange)="triggerChangeCheck()"
></ion-input>
<ion-input
*ngIf="this.node.type === 'form_input_password'"
[(ngModel)]="value"
[type]="'password'"
[placeholder]="this.node.AdditionalData.placeholder"
[required]="this.node.AdditionalData.required"
[readonly]="this.isReadonly"
(ionChange)="triggerChangeCheck()"
></ion-input>
<ion-input
*ngIf="this.node.type === 'form_input_email'"
[(ngModel)]="value"
[type]="'email'"
[placeholder]="this.node.AdditionalData.placeholder"
[required]="this.node.AdditionalData.required"
[readonly]="this.isReadonly"
(ionChange)="triggerChangeCheck()"
></ion-input>
<!-- TODO readonly handling -->
<ion-select
*ngIf="this.node.type === 'form_input_select'"
[(ngModel)]="value"
[placeholder]="this.node.AdditionalData.placeholder"
[required]="this.node.AdditionalData.required"
(ionChange)="triggerChangeCheck()"
style="width: 100%;"
>
<ion-select-option
*ngFor="let choice of selectChoices"
[value]="choice.value"
>{{ choice.display }}</ion-select-option>
</ion-select>
<!-- TODO readonly handling -->
<ion-select
*ngIf="this.node.type === 'form_input_multiselect'"
[(ngModel)]="value"
[placeholder]="this.node.AdditionalData.placeholder"
[required]="this.node.AdditionalData.required"
(ionChange)="triggerChangeCheck()"
[multiple]="true"
style="width: 100%;"
>
<ion-select-option
*ngFor="let choice of selectChoices"
[value]="choice.value"
>{{ choice.display }}</ion-select-option>
</ion-select>
<ion-textarea
*ngIf="this.node.type === 'form_input_textarea'"
[(ngModel)]="value"
[placeholder]="this.node.AdditionalData.placeholder"
[required]="this.node.AdditionalData.required"
(ionChange)="triggerChangeCheck()"
[autoGrow]="true"
style="width: 100%;"
[readonly]="this.isReadonly"
></ion-textarea>
<ion-button
slot="end"
style="margin-top: 5px;"
*ngIf="!this.isReadonly && !this.isFilloutMode"
(click)="onEditClick()"
>Edit</ion-button>
</ion-item>