Fix IDs in forms.

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -1,6 +1,6 @@
 <div class="table-items-row" [class.invalid]="fieldForm.invalid">
     <label>
-        {{field.displayName}} <span class="fieldRequired" [class.hidden]="!field.properties.isRequired">*</span>
+        {{field.displayName}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
     </label> 
     
     <span class="field-disabled" *ngIf="field.isDisabled">Disabled</span>

src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="editForm">
     <div class="form-group row" *ngIf="showName">
-        <label class="col col-3 col-form-label" for="fieldName">Name</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
             
             <small class="form-text text-muted">
                 The name of the field in the API response.
@@ -12,12 +12,12 @@
     </div>
 
     <div class="form-group row">
-        <label class="col col-3 col-form-label" for="fieldLabel">Label</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
 
         <div class="col col-6">
             <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
 
-            <input type="text" class="form-control" id="fieldLabel" maxlength="100" formControlName="label" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
 
             <small class="form-text text-muted">
                 Define the display name for the field for documentation and user interfaces.
@@ -26,12 +26,12 @@
     </div>
 
     <div class="form-group row">
-        <label class="col col-3 col-form-label" for="fieldHints">Hints</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
 
         <div class="col col-6">
             <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
 
-            <input type="text" class="form-control" id="fieldHints" maxlength="100" formControlName="hints" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
 
             <small class="form-text text-muted">
                 Define some hints for the user and editor for the field for documentation and user interfaces.
@@ -42,8 +42,8 @@
     <div class="form-group row">
         <div class="col col-6 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldListfield" formControlName="isListField" /> 
-                <label class="form-check-label" for="fieldListfield">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldListfield" formControlName="isListField" /> 
+                <label class="form-check-label" for="{{field.fieldId}}_fieldListfield">
                     List Field
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import { FieldDto } from '@app/shared';
@@ -13,8 +13,7 @@ import { FieldDto } from '@app/shared';
 @Component({
     selector: 'sqx-field-form-common',
     styleUrls: ['field-form-common.component.scss'],
-    templateUrl: 'field-form-common.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'field-form-common.component.html'
 })
 export class FieldFormCommonComponent {
     @Input()

src/Squidex/app/features/schemas/pages/schema/forms/field-form-ui.component.html

@@ -1,29 +1,29 @@
 <div [ngSwitch]="field.properties.fieldType">
     <div *ngSwitchCase="'Number'">
-        <sqx-number-ui [editForm]="editForm" [properties]="field.properties"></sqx-number-ui>
+        <sqx-number-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-number-ui>
     </div>
     <div *ngSwitchCase="'String'">
-        <sqx-string-ui [editForm]="editForm" [properties]="field.properties"></sqx-string-ui>
+        <sqx-string-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-string-ui>
     </div>
     <div *ngSwitchCase="'Boolean'">
-        <sqx-boolean-ui [editForm]="editForm" [properties]="field.properties"></sqx-boolean-ui>
+        <sqx-boolean-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-boolean-ui>
     </div>
     <div *ngSwitchCase="'DateTime'">
-        <sqx-date-time-ui [editForm]="editForm" [properties]="field.properties"></sqx-date-time-ui>
+        <sqx-date-time-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-date-time-ui>
     </div>
     <div *ngSwitchCase="'Geolocation'">
-        <sqx-geolocation-ui [editForm]="editForm" [properties]="field.properties"></sqx-geolocation-ui>
+        <sqx-geolocation-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-geolocation-ui>
     </div>
     <div *ngSwitchCase="'Json'">
-        <sqx-json-ui [editForm]="editForm" [properties]="field.properties"></sqx-json-ui>
+        <sqx-json-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-json-ui>
     </div>
     <div *ngSwitchCase="'Assets'">
-        <sqx-assets-ui [editForm]="editForm" [properties]="field.properties"></sqx-assets-ui>
+        <sqx-assets-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-assets-ui>
     </div>
     <div *ngSwitchCase="'References'">
-        <sqx-references-ui [editForm]="editForm" [properties]="field.properties"></sqx-references-ui>
+        <sqx-references-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-references-ui>
     </div>
     <div *ngSwitchCase="'Tags'">
-        <sqx-tags-ui [editForm]="editForm" [properties]="field.properties"></sqx-tags-ui>
+        <sqx-tags-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-tags-ui>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/forms/field-form-ui.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import { FieldDto } from '@app/shared';
@@ -13,8 +13,7 @@ import { FieldDto } from '@app/shared';
 @Component({
     selector: 'sqx-field-form-ui',
     styleUrls: ['field-form-ui.component.scss'],
-    templateUrl: 'field-form-ui.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'field-form-ui.component.html'
 })
 export class FieldFormUIComponent {
     @Input()

src/Squidex/app/features/schemas/pages/schema/forms/field-form-validation.component.html

@@ -1,29 +1,29 @@
 <div [ngSwitch]="field.properties.fieldType">
     <div *ngSwitchCase="'Number'">
-        <sqx-number-validation [editForm]="editForm" [properties]="field.properties"></sqx-number-validation>
+        <sqx-number-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-number-validation>
     </div>
     <div *ngSwitchCase="'String'">
-        <sqx-string-validation [editForm]="editForm" [properties]="field.properties" [patterns]="patterns"></sqx-string-validation>
+        <sqx-string-validation [editForm]="editForm" [field]="field" [properties]="field.properties" [patterns]="patterns"></sqx-string-validation>
     </div>
     <div *ngSwitchCase="'Boolean'">
-        <sqx-boolean-validation [editForm]="editForm" [properties]="field.properties"></sqx-boolean-validation>
+        <sqx-boolean-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-boolean-validation>
     </div>
     <div *ngSwitchCase="'DateTime'">
-        <sqx-date-time-validation [editForm]="editForm" [properties]="field.properties"></sqx-date-time-validation>
+        <sqx-date-time-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-date-time-validation>
     </div>
     <div *ngSwitchCase="'Geolocation'">
-        <sqx-geolocation-validation [editForm]="editForm" [properties]="field.properties"></sqx-geolocation-validation>
+        <sqx-geolocation-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-geolocation-validation>
     </div>
     <div *ngSwitchCase="'Json'">
-        <sqx-json-validation [editForm]="editForm" [properties]="field.properties"></sqx-json-validation>
+        <sqx-json-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-json-validation>
     </div>
     <div *ngSwitchCase="'Assets'">
-        <sqx-assets-validation [editForm]="editForm" [properties]="field.properties"></sqx-assets-validation>
+        <sqx-assets-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-assets-validation>
     </div>
     <div *ngSwitchCase="'References'">
-        <sqx-references-validation [editForm]="editForm" [properties]="field.properties"></sqx-references-validation>
+        <sqx-references-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-references-validation>
     </div>
     <div *ngSwitchCase="'Tags'">
-        <sqx-tags-validation [editForm]="editForm" [properties]="field.properties"></sqx-tags-validation>
+        <sqx-tags-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-tags-validation>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/forms/field-form-validation.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import {
@@ -17,8 +17,7 @@ import {
 @Component({
     selector: 'sqx-field-form-validation',
     styleUrls: ['field-form-validation.component.scss'],
-    templateUrl: 'field-form-validation.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'field-form-validation.component.html'
 })
 export class FieldFormValidationComponent {
     @Input()

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -60,7 +60,7 @@
         </div>
 
         <div dnd-sortable-container [sortableData]="schema.fields">
-            <div *ngFor="let field of schema.fields; let i = index; trackBy: trackByField" dnd-sortable [sortableIndex]="i" (sqxSorted)="sortFields($event)">
+            <div *ngFor="let field of schema.fields; let i = index;" dnd-sortable [sortableIndex]="i" (sqxSorted)="sortFields($event)">
                 <sqx-field [field]="field" [schema]="schema" [patterns]="patternsState.patterns | async"></sqx-field>
             </div>
     

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -128,10 +128,6 @@ export class SchemaPageComponent implements OnDestroy, OnInit {
         this.schemaExport = result;
     }
 
-    public trackByField(index: number, field: FieldDto) {
-        return field.fieldId;
-    }
-
     private back() {
         this.router.navigate(['../'], { relativeTo: this.route });
     }

src/Squidex/app/features/schemas/pages/schema/types/assets-ui.component.ts

@@ -5,21 +5,23 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { AssetsFieldPropertiesDto } from '@app/shared';
+import { AssetsFieldPropertiesDto, FieldDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-assets-ui',
     styleUrls: ['assets-ui.component.scss'],
-    templateUrl: 'assets-ui.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'assets-ui.component.html'
 })
 export class AssetsUIComponent {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: AssetsFieldPropertiesDto;
 }

src/Squidex/app/features/schemas/pages/schema/types/assets-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>
@@ -40,10 +40,10 @@
     </div>
     
     <div class="form-group2 row">
-        <label class="col col-3 col-form-checkbox-label" for="fieldMustBeImage">Must be Image</label>
+        <label class="col col-3 col-form-checkbox-label" for="{{field.fieldId}}_fieldMustBeImage">Must be Image</label>
 
         <div class="col col-6">
-            <input class="form-check-input" type="checkbox" id="fieldMustBeImage" formControlName="mustBeImage" />
+            <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldMustBeImage" formControlName="mustBeImage" />
         </div>
     </div>
     

src/Squidex/app/features/schemas/pages/schema/types/assets-validation.component.ts

@@ -5,21 +5,23 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 
-import { AssetsFieldPropertiesDto } from '@app/shared';
+import { AssetsFieldPropertiesDto, FieldDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-assets-validation',
     styleUrls: ['assets-validation.component.scss'],
-    templateUrl: 'assets-validation.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'assets-validation.component.html'
 })
 export class AssetsValidationComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: AssetsFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label class="col col-3 col-form-label" for="fieldPlaceholder">Placeholder</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">Placeholder</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldPlaceholder" maxlength="100" formControlName="placeholder" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
             <small class="form-text text-muted">
                 Define the placeholder for the input control.
@@ -33,8 +33,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldInlineEditable" formControlName="inlineEditable" />
-                <label class="form-check-label" for="fieldInlineEditable">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
                     Inline Editable
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.ts

@@ -8,7 +8,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { BooleanFieldPropertiesDto } from '@app/shared';
+import { BooleanFieldPropertiesDto, FieldDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-boolean-ui',
@@ -19,6 +19,9 @@ export class BooleanUIComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: BooleanFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>
@@ -13,8 +13,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue />
-                <label class="form-check-label" for="fieldDefaultValue">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldDefaultValue">
                     Default Value
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.ts

@@ -9,7 +9,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
-import { BooleanFieldPropertiesDto } from '@app/shared';
+import { BooleanFieldPropertiesDto, FieldDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-boolean-validation',
@@ -20,6 +20,9 @@ export class BooleanValidationComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: BooleanFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label class="col col-3 col-form-label" for="fieldPlaceholder">Placeholder</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">Placeholder</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldPlaceholder" maxlength="100" formControlName="placeholder" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
             <small class="form-text text-muted">
                 Define the placeholder for the input control.

src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.ts

@@ -9,7 +9,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 
-import { FloatConverter, NumberFieldPropertiesDto } from '@app/shared';
+import { FieldDto, FloatConverter, NumberFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-date-time-ui',
@@ -20,6 +20,9 @@ export class DateTimeUIComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: NumberFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />    
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />    
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>
@@ -39,7 +39,7 @@
         </div>
 
         <div class="form-group row" *ngIf="showDefaultValue | async">
-            <label class="col col-3 col-form-label" for="fieldDefaultValue">Default Value</label>
+            <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldDefaultValue">Default Value</label>
 
             <div class="col col-9">
                 <sqx-date-time-editor enforceTime="true" mode="DateTime" formControlName="defaultValue"></sqx-date-time-editor>

src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.ts

@@ -9,7 +9,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
-import { DateTimeFieldPropertiesDto, ValidatorsEx } from '@app/shared';
+import { DateTimeFieldPropertiesDto, FieldDto, ValidatorsEx } from '@app/shared';
 
 @Component({
     selector: 'sqx-date-time-validation',
@@ -20,6 +20,9 @@ export class DateTimeValidationComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: DateTimeFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/geolocation-ui.component.ts

@@ -8,7 +8,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { GeolocationFieldPropertiesDto } from '@app/shared';
+import { FieldDto, GeolocationFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-geolocation-ui',
@@ -19,6 +19,9 @@ export class GeolocationUIComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: GeolocationFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/geolocation-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />    
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />    
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/geolocation-validation.component.ts

@@ -8,7 +8,7 @@
 import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { GeolocationFieldPropertiesDto } from '@app/shared';
+import { FieldDto, GeolocationFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-geolocation-validation',
@@ -19,6 +19,9 @@ export class GeolocationValidationComponent {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: GeolocationFieldPropertiesDto;
 }

src/Squidex/app/features/schemas/pages/schema/types/json-ui.component.ts

@@ -8,7 +8,7 @@
 import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { JsonFieldPropertiesDto } from '@app/shared';
+import { FieldDto, JsonFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-json-ui',
@@ -19,6 +19,9 @@ export class JsonUIComponent {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: JsonFieldPropertiesDto;
 }

src/Squidex/app/features/schemas/pages/schema/types/json-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/json-validation.component.ts

@@ -8,7 +8,7 @@
 import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { JsonFieldPropertiesDto } from '@app/shared';
+import { FieldDto, JsonFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-json-validation',
@@ -19,6 +19,9 @@ export class JsonValidationComponent {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: JsonFieldPropertiesDto;
 }

src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label class="col col-3 col-form-label" for="fieldPlaceholder">Placeholder</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">Placeholder</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldPlaceholder" maxlength="100" formControlName="placeholder" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
             <small class="form-text text-muted">
                 Define the placeholder for the input control.
@@ -54,8 +54,8 @@
     <div class="form-group row" [class.hidden]="hideInlineEditable | async">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldInlineEditable" formControlName="inlineEditable" />
-                <label class="form-check-label" for="fieldInlineEditable">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
                     Inline Editable
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.ts

@@ -9,7 +9,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 
-import { FloatConverter, NumberFieldPropertiesDto } from '@app/shared';
+import { FieldDto, FloatConverter, NumberFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-number-ui',
@@ -23,6 +23,9 @@ export class NumberUIComponent implements OnDestroy, OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: NumberFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>
@@ -24,10 +24,10 @@
     </div>
 
     <div class="form-group row" *ngIf="showDefaultValue | async">
-        <label class="col col-3 col-form-label" for="fieldDefaultValue">Default Value</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldDefaultValue">Default Value</label>
 
         <div class="col col-6">
-            <input type="number" class="form-control" id="fieldDefaultValue" formControlName="defaultValue" />
+            <input type="number" class="form-control" id="{{field.fieldId}}_fieldDefaultValue" formControlName="defaultValue" />
         </div>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.ts

@@ -9,7 +9,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
-import { NumberFieldPropertiesDto } from '@app/shared';
+import { FieldDto, NumberFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-number-validation',
@@ -20,6 +20,9 @@ export class NumberValidationComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: NumberFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/references-ui.component.ts

@@ -5,21 +5,23 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { ReferencesFieldPropertiesDto } from '@app/shared';
+import { FieldDto, ReferencesFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-references-ui',
     styleUrls: ['references-ui.component.scss'],
-    templateUrl: 'references-ui.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'references-ui.component.html'
 })
 export class ReferencesUIComponent {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: ReferencesFieldPropertiesDto;
 }

src/Squidex/app/features/schemas/pages/schema/types/references-validation.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label for="field-placeholder" class="col col-3 col-form-label" for="fieldSchemaId">Schema</label>
+        <label for="{{field.fieldId}}_field-placeholder" class="col col-3 col-form-label" for="{{field.fieldId}}_fieldSchemaId">Schema</label>
 
         <div class="col col-6">
-            <select class="form-control" id="fieldSchemaId" formControlName="schemaId">
+            <select class="form-control" id="{{field.fieldId}}_fieldSchemaId" formControlName="schemaId">
                 <option *ngFor="let schema of schemasState.schemas | async" [ngValue]="schema.id">{{schema.displayName}}</option>
             </select>
         </div>
@@ -13,8 +13,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/references-validation.component.ts

@@ -5,21 +5,23 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { ReferencesFieldPropertiesDto, SchemasState } from '@app/shared';
+import { FieldDto, ReferencesFieldPropertiesDto, SchemasState } from '@app/shared';
 
 @Component({
     selector: 'sqx-references-validation',
     styleUrls: ['references-validation.component.scss'],
-    templateUrl: 'references-validation.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'references-validation.component.html'
 })
 export class ReferencesValidationComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: ReferencesFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html

@@ -1,9 +1,9 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label class="col col-3 col-form-label" for="fieldPlaceholder">Placeholder</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">Placeholder</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldPlaceholder" maxlength="100" formControlName="placeholder" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder" />
 
             <small class="form-text text-muted">
                 Define the placeholder for the input control.
@@ -75,8 +75,8 @@
     <div class="form-group row" [class.hidden]="hideInlineEditable | async">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldInlineEditable" formControlName="inlineEditable" />
-                <label class="form-check-label" for="fieldInlineEditable">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldInlineEditable" formControlName="inlineEditable" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldInlineEditable">
                     Inline Editable
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.ts

@@ -9,7 +9,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 
-import { StringFieldPropertiesDto } from '@app/shared';
+import { FieldDto, StringFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-string-ui',
@@ -23,6 +23,9 @@ export class StringUIComponent implements OnDestroy, OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: StringFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" /> 
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" /> 
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>
@@ -24,10 +24,10 @@
     </div>
 
     <div class="form-group row">
-        <label class="col col-3 col-form-label" for="fieldPattern">Pattern</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldPattern">Pattern</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldPattern" formControlName="pattern" placeholder="Regex Pattern" #patternInput
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldPattern" formControlName="pattern" placeholder="Regex Pattern" #patternInput
                 autocomplete="off" 
                 autocorrect="off"
                 autocapitalize="off" 
@@ -47,18 +47,18 @@
         </small>
     </div>
     <div class="form-group row" *ngIf="showPatternMessage">
-        <label class="col col-3 col-form-label" for="fieldPatternMessage">Pattern Message</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldPatternMessage">Pattern Message</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldPatternMessage" formControlName="patternMessage" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldPatternMessage" formControlName="patternMessage" />
         </div>
     </div>
 
     <div class="form-group row" *ngIf="showDefaultValue | async">
-        <label class="col col-3 col-form-label" for="fieldDefaultValue">Default Value</label>
+        <label class="col col-3 col-form-label" for="{{field.fieldId}}_fieldDefaultValue">Default Value</label>
 
         <div class="col col-6">
-            <input type="text" class="form-control" id="fieldDefaultValue" formControlName="defaultValue" />
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldDefaultValue" formControlName="defaultValue" />
         </div>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.ts

@@ -11,6 +11,7 @@ import { Observable, Subscription } from 'rxjs';
 
 import {
     AppPatternDto,
+    FieldDto,
     ImmutableArray,
     ModalView,
     StringFieldPropertiesDto
@@ -27,6 +28,9 @@ export class StringValidationComponent implements OnDestroy, OnInit {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: StringFieldPropertiesDto;
 

src/Squidex/app/features/schemas/pages/schema/types/tags-ui.component.ts

@@ -5,21 +5,23 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { AssetsFieldPropertiesDto } from '@app/shared';
+import { AssetsFieldPropertiesDto, FieldDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-tags-ui',
     styleUrls: ['tags-ui.component.scss'],
-    templateUrl: 'tags-ui.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'tags-ui.component.html'
 })
 export class TagsUIComponent {
     @Input()
     public editForm: FormGroup;
 
+    @Input()
+    public field: FieldDto;
+
     @Input()
     public properties: AssetsFieldPropertiesDto;
 }

src/Squidex/app/features/schemas/pages/schema/types/tags-validation.component.html

@@ -2,8 +2,8 @@
     <div class="form-group row">
         <div class="col col-9 offset-3">
             <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="fieldRequired" formControlName="isRequired" />
-                <label class="form-check-label" for="fieldRequired">
+                <input class="form-check-input" type="checkbox" id="{{field.fieldId}}_fieldRequired" formControlName="isRequired" />
+                <label class="form-check-label" for="{{field.fieldId}}_fieldRequired">
                     Required
                 </label>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/tags-validation.component.ts

@@ -5,23 +5,25 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 
-import { AssetsFieldPropertiesDto } from '@app/shared';
+import { FieldDto, TagsFieldPropertiesDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-tags-validation',
     styleUrls: ['tags-validation.component.scss'],
-    templateUrl: 'tags-validation.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: 'tags-validation.component.html'
 })
 export class TagsValidationComponent implements OnInit {
     @Input()
     public editForm: FormGroup;
 
     @Input()
-    public properties: AssetsFieldPropertiesDto;
+    public field: FieldDto;
+
+    @Input()
+    public properties: TagsFieldPropertiesDto;
 
     public ngOnInit() {
         this.editForm.setControl('maxItems',

src/Squidex/app/features/settings/pages/languages/language.component.html

@@ -2,7 +2,7 @@
     <div class="table-items-row-summary">        
         <div class="row">
             <div class="col col-2">
-                <span class="language-code" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">{{language.iso2Code}}</span>
+                <span class="language-code" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster"></span>
             </div>
             <div class="col col-6">
                 <span class="language-name table-cell" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">{{language.englishName}}</span>
@@ -71,8 +71,8 @@
                 <div class="form-group row" *ngIf="!language.isMaster">
                     <div class="col offset-3 col-9">
                         <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="isMaster" formControlName="isMaster" />
-                            <label class="form-check-label" for="isMaster">
+                            <input class="form-check-input" type="checkbox" id="{{language.iso2Code}}_isMaster" formControlName="isMaster" />
+                            <label class="form-check-label" for="{{language.iso2Code}}_isMaster">
                                 Is Master
                             </label>
                         </div>
@@ -86,8 +86,8 @@
                 <div class="form-group row" *ngIf="!language.isMaster">
                     <div class="col offset-3 col-9" *ngIf="!isMaster">
                         <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="isOptional" formControlName="isOptional" />
-                            <label class="form-check-label" for="isOptional">
+                            <input class="form-check-input" type="checkbox" id="{{language.iso2Code}}_isOptional" formControlName="isOptional" />
+                            <label class="form-check-label" for="{{language.iso2Code}}_isOptional">
                                 Is Optional
                             </label> 
                         </div>