Common component for field form.

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

@@ -1,56 +0,0 @@
-<div [formGroup]="editForm">
-    <div class="form-group row">
-        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
-
-        <div class="col-6">
-            <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
-            
-            <sqx-form-hint>
-                The name of the field in the API response.
-            </sqx-form-hint>
-        </div>                        
-    </div>
-
-    <div class="form-group row">
-        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
-
-        <div class="col-6">
-            <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
-
-            <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
-
-            <sqx-form-hint>
-                Define the display name for the field for documentation and user interfaces.
-            </sqx-form-hint>
-        </div>
-    </div>
-
-    <div class="form-group row">
-        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
-
-        <div class="col-6">
-            <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
-
-            <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
-
-            <sqx-form-hint>
-                Define some hints for the user and editor for the field for documentation and user interfaces.
-            </sqx-form-hint>
-        </div>
-    </div>
-
-    <div class="form-group row" *ngIf="field.properties.isContentField">
-        <div class="col-6 offset-3">
-            <div class="form-check">
-                <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>
-
-            <sqx-form-hint>
-                List fields are shown as a column in the content list.<br />When no list field is defined, the first field is used.
-            </sqx-form-hint>
-        </div>
-    </div>
-</div>

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

@@ -1,2 +0,0 @@
-@import '_vars';
-@import '_mixins';

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

@@ -12,8 +12,64 @@ import { FieldDto } from '@app/shared';
 
 @Component({
     selector: 'sqx-field-form-common',
-    styleUrls: ['field-form-common.component.scss'],
+    template: `
-    templateUrl: 'field-form-common.component.html'
+        <div [formGroup]="editForm">
+            <div class="form-group row">
+                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldName">Name</label>
+
+                <div class="col-6">
+                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
+
+                    <sqx-form-hint>
+                        The name of the field in the API response.
+                    </sqx-form-hint>
+                </div>
+            </div>
+
+            <div class="form-group row">
+                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldLabel">Label</label>
+
+                <div class="col-6">
+                    <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
+
+                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldLabel" maxlength="100" formControlName="label" />
+
+                    <sqx-form-hint>
+                        Define the display name for the field for documentation and user interfaces.
+                    </sqx-form-hint>
+                </div>
+            </div>
+
+            <div class="form-group row">
+                <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldHints">Hints</label>
+
+                <div class="col-6">
+                    <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
+
+                    <input type="text" class="form-control" id="{{field.fieldId}}_fieldHints" maxlength="100" formControlName="hints" />
+
+                    <sqx-form-hint>
+                        Define some hints for the user and editor for the field for documentation and user interfaces.
+                    </sqx-form-hint>
+                </div>
+            </div>
+
+            <div class="form-group row" *ngIf="field.properties.isContentField">
+                <div class="col-6 offset-3">
+                    <div class="form-check">
+                        <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>
+
+                    <sqx-form-hint>
+                        List fields are shown as a column in the content list.<br />When no list field is defined, the first field is used.
+                    </sqx-form-hint>
+                </div>
+            </div>
+        </div>
+    `
 })
 export class FieldFormCommonComponent implements OnInit {
     @Input()

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

@@ -8,7 +8,11 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { FieldDto, ImmutableArray, PatternDto } from '@app/shared';
+import {
+    FieldDto,
+    ImmutableArray,
+    PatternDto
+} from '@app/shared';
 
 @Component({
     selector: 'sqx-field-form',