argos/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html

<div *ngIf="form && field" [id]="field.id" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle" class="dynamic-form-field row">

	<!-- <h5 *ngIf="field.title">{{field.title}}</h5> -->


	<h5 *ngIf="field.description" class="col-12">{{field.description}}</h5>
	<h5 *ngIf="field.extendedDescription" class="col-12"><i>{{field.extendedDescription}}</i></h5>

	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
		<input matInput formControlName="value" placeholder="{{field.data.label}}" [required]="field.validationRequired">
		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
			| translate}}</mat-error>
	</mat-form-field>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12" *ngIf="this.field.data.type === datasetProfileComboBoxTypeEnum.Autocomplete">
				<app-single-auto-complete  placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')" [configuration]="singleAutoCompleteConfiguration">
				</app-single-auto-complete>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
			</mat-form-field>
			<mat-form-field *ngIf="this.field.data.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
				<mat-select [formControl]="form.get('value')" [required]="field.validationRequired">
					<mat-option *ngFor="let opt of field.data.options" [value]="assignDropdownItem(opt)">{{opt.label}}</mat-option>
				</mat-select>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.CheckBox" class="col-12">
		<mat-checkbox [formControl]="form.get('value')" [required]="field.validationRequired">{{field.data.label}}</mat-checkbox>
	</div>

	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
		<textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="field.validationRequired"></textarea>
		<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
			<mat-icon>close</mat-icon>
		</button>
		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
	</mat-form-field>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
		<mat-radio-group [formControl]="form.get('value')" [required]="field.validationRequired">
			<mat-radio-button class="radio-button-item" name="{{field.id}}" value="true">Yes</mat-radio-button>
			<!-- <br> -->
			<mat-radio-button class="radio-button-item" name="{{field.id}}" value="false">No</mat-radio-button>
		</mat-radio-group>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
		<mat-radio-group [formControl]="form.get('value')" [required]="field.validationRequired">
			<mat-radio-button *ngFor="let option of field.data.options let index = index" class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
		</mat-radio-group>
	</div>
</div>