@vendasta/store/order-form/fields/field.component.html

Components and data for Store

<ng-container [ngSwitch]="field.controlType" [formGroup]="form">

    <ng-container *ngSwitchCase="'dropdown'">
        <mat-form-field class="form-field-container dropdown">
            <mat-select class="test-class" matInput [formControlName]="field.id" [id]="field.id" [placeholder]="field.getLabel()">
                <mat-option *ngFor="let option of field.options" [value]="option.value">{{ option.label }}</mat-option>
            </mat-select>
        </mat-form-field>
        <div *ngIf="field.description" class="hint-description">{{ field.description }}</div>
    </ng-container>

    <ng-container *ngSwitchCase="'textbox'">
        <mat-form-field class="form-field-container">
            <input [type]="field.textboxType" [id]="field.id" [formControlName]="field.id" matInput [placeholder]="field.getLabel()">
        </mat-form-field>
        <div class="hint-description" *ngIf="field.description">{{ field.description }}</div>
    </ng-container>

    <ng-container *ngSwitchCase="'checkbox'">
        <div class="form-field-container checkbox">
            <mat-checkbox [formControlName]="field.id" [id]="field.id" ngControlDefault></mat-checkbox>
            <div class="checkbox-placeholder"> {{field.label}}</div>
        </div>
        <div class="hint-description checkbox-description" *ngIf="field.description">{{ field.description }}</div>
    </ng-container>

    <ng-container *ngSwitchCase="'textarea'">
        <mat-form-field class="form-field-container">
            <textarea matInput [formControlName]="field.id" [placeholder]="field.getLabel()" [id]="field.id"></textarea>
        </mat-form-field>
        <div class="hint-description textarea-description" *ngIf="field.description">{{ field.description }}</div>
    </ng-container>

    <ng-container *ngSwitchCase="'file'">
        <div class="form-field-container">
            <file-group-uploader [uploadUrl]="field.uploadUrl" [label]="field.getLabel()" [description]="field.description" [formGroup]="form" [formControlName]="field.id"
                [numFiles]="field.numFiles" class="form-field-container"></file-group-uploader>
        </div>
    </ng-container>

</ng-container>