<div *ngFor="let field of dmpProfileDefinition?.fields; let i = index" class="row">
	<div class="col-md-8">
		<!-- <div *ngIf="field.type == dmpProfileTypeEnum.Input"> -->
		<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Date">
			<input matInput [matDatepicker]="picker" [placeholder]="field.label"
				[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
				[required]="field.required">
			<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
			<mat-datepicker #picker></mat-datepicker>
			<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
                | translate}}</mat-error>
		</mat-form-field>
		<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Text">
			<input matInput [placeholder]="field.label"
				[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
				[required]="field.required">
			<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
                    | translate}}</mat-error>
		</mat-form-field>
		<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Number">
			<input matInput type="number" [placeholder]="field.label"
				[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
				[required]="field.required">
			<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
                    | translate}}</mat-error>
		</mat-form-field>
		<div class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.ExternalAutocomplete">
			<div *ngIf="field.externalAutocomplete.multiAutoComplete == false">
				<mat-form-field class="full-width">
					<app-single-auto-complete
						[required]="false"
						[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
						placeholder="{{field.label}}"
						[configuration]="singleAutocompleteMap[field.id]">
					</app-single-auto-complete>
				</mat-form-field>
			</div>
			<div *ngIf="field.externalAutocomplete.multiAutoComplete == true">
				<mat-form-field class="full-width">
					<app-multiple-auto-complete
					[required]="field.required"
					[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
					placeholder="{{field.label}}"
					[configuration]="multiAutocompleteMap[field.id]">
					</app-multiple-auto-complete>
				</mat-form-field>
			</div>
			<!-- <mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
					| translate}}</mat-error> -->
		</div>
	</div>
</div>
