argos/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html

<div class="dmp-profile-editor">
	<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
		<mat-card>
			<mat-card-header>
				<mat-card-title *ngIf="isNew">
					<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
				</mat-card-title>
				<mat-card-title *ngIf="!isNew">
					<h4>{{formGroup.get('label').value}}</h4>
				</mat-card-title>
			</mat-card-header>
			<mat-card-content>
				<div class="row">
					<mat-form-field class="col-12">
						<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text"
							name="label" formControlName="label" required>
						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
							{{formGroup.get('label').getError('backendError').message}}</mat-error>
						<mat-error *ngIf="formGroup.get('label').hasError('required')">
							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>

					<h4 class="col-12">{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}</h4>
					<div class="col-12">
						<div class="row"
							*ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
							<mat-form-field class="col">
								<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}"
									type="text" name="label" [formControl]="fieldFormGroup.get('label')" required>
								<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
								<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
									{{fieldFormGroup.get('label').getError('backendError').message}}</mat-error>
							</mat-form-field>
							<mat-form-field class="col">
								<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}"
									[formControl]="fieldFormGroup.get('type')" required>
									<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()"
										[value]="fieldType">{{
										getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
								</mat-select>
								<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
								<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
									{{fieldFormGroup.get('type').getError('backendError').message}}</mat-error>
							</mat-form-field>
							<mat-form-field class="col">
								<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}"
									[formControl]="fieldFormGroup.get('dataType')" required>
									<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()"
										[value]="fieldDataType">{{
										getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
								</mat-select>
								<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
								<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
									{{fieldFormGroup.get('dataType').getError('backendError').message}}</mat-error>
							</mat-form-field>
							<div class="centered-row-item col-auto">
								<mat-checkbox [formControl]="fieldFormGroup.get('required')">
									{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-checkbox>
							</div>
							<div class="centered-row-item col-auto"><button mat-icon-button type="button"
									(click)="removeField(i)" [disabled]="viewOnly">
									<mat-icon class="mat-24">delete</mat-icon>
								</button>
							</div>
						</div>
						<button mat-icon-button class="col-auto" color="primary" type="button" (click)="addField()"
							[disabled]="viewOnly">
							<mat-icon class="mat-24">add</mat-icon>
						</button>
					</div>
				</div>
				<div class="col-12">
					<div class="row">
						<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()"
								type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
						<div class="col"></div>
						<div class="col-auto" *ngIf="!isNew"><button mat-raised-button color="primary" type="button"
								(click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
						<button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto"
							color="primary" (click)="finalize()" [disabled]="!formGroup.valid"
							type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
						<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto"
							color="primary" (click)="downloadXML()"
							type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
						<div class="col-auto" *ngIf="!viewOnly"><button mat-raised-button color="primary"
								type="submit">{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
					</div>
				</div>
			</mat-card-content>
		</mat-card>
	</form>
</div>