Unique id for radios.

src/Squidex/app/features/content/shared/due-time-selector.component.html

@@ -5,14 +5,14 @@
 
     <ng-container content>
         <div class="form-check">
-            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately">
+            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately" name="dueTimeMode">
             <label class="form-check-label" for="immediately">
                 {{dueTimeAction}} content item(s) immediately.
             </label>
         </div>
 
         <div class="form-check">
-            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled">
+            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled" name="dueTimeMode">
             <label class="form-check-label" for="scheduled">
                 {{dueTimeAction}} content item(s) at a later point date and time.
             </label>

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -30,7 +30,7 @@
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
 							<div class="form-check form-check-inline" *ngFor="let value of field.properties['allowedValues']">
-								<input class="form-check-input" type="radio" [value]="value" [formControl]="control" />
+								<input class="form-check-input" type="radio" [value]="value" [formControl]="control" [name]="uniqueId" />
 								<label class="form-check-label">
 									{{value}}
 								</label>
@@ -66,7 +66,7 @@
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
 							<div class="form-check form-check-inline" *ngFor="let value of field.properties['allowedValues']">
-								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="control" />
+								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="control" [name]="uniqueId" />
 								<label class="form-check-label">
 									{{value}}
 								</label>

src/Squidex/app/features/content/shared/field-editor.component.ts

@@ -11,7 +11,8 @@ import { FormControl } from '@angular/forms';
 import {
     AppLanguageDto,
     EditContentForm,
-    FieldDto
+    FieldDto,
+    MathHelper
 } from '@app/shared';
 
 @Component({
@@ -40,4 +41,6 @@ export class FieldEditorComponent {
 
     @Input()
     public displaySuffix: string;
+
+    public uniqueId = MathHelper.guid();
 }

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

@@ -18,7 +18,7 @@
                     <div class="row">
                         <div class="col-4 type" *ngFor="let fieldType of fieldTypes">
                             <label>
-                                <input type="radio" class="radio-input" formControlName="type" value="{{fieldType.type}}" />
+                                <input type="radio" class="radio-input" formControlName="type" value="{{fieldType.type}}" name="fieldType" />
 
                                 <div class="row no-gutters">
                                     <div class="col-auto">

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

@@ -26,14 +26,14 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Checkbox'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Checkbox" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Checkbox" name="editor" />
 
                 <i class="icon-control-Checkbox"></i>
 
                 <span class="radio-label">Checkbox</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Toggle'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Toggle" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Toggle" name="editor" />
 
                 <i class="icon-control-Toggle"></i>
 

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

@@ -26,14 +26,14 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Date'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Date" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Date" name="editor" />
 
                 <i class="icon-control-Date"></i>
 
                 <span class="radio-label">Date</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'DateTime'">
-                <input type="radio" class="radio-input" formControlName="editor" value="DateTime" />
+                <input type="radio" class="radio-input" formControlName="editor" value="DateTime" name="editor" />
 
                 <i class="icon-control-DateTime"></i>
 

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

@@ -15,7 +15,7 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Map'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Map" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Map" name="editor" />
 
                 <i class="icon-control-Map"></i>
 

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

@@ -26,28 +26,28 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Input'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Input" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Input" name="editor" />
 
                 <i class="icon-control-Input"></i>
 
                 <span class="radio-label">Input</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Dropdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" name="editor" />
 
                 <i class="icon-control-Dropdown"></i>
 
                 <span class="radio-label" clas>Dropdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Radio'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Radio" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Radio" name="editor" />
 
                 <i class="icon-control-Radio"></i>
 
                 <span class="radio-label">Radio</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Stars'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Stars" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Stars" name="editor" />
 
                 <i class="icon-control-Stars"></i>
 

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

@@ -26,49 +26,49 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Input'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Input" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Input" name="editor" />
 
                 <i class="icon-control-Input"></i>
 
                 <span class="radio-label">Input</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Slug'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Slug" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Slug" name="editor" />
 
                 <i class="icon-control-Slug"></i>
 
                 <span class="radio-label">Slug</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'TextArea'">
-                <input type="radio" class="radio-input" formControlName="editor" value="TextArea" />
+                <input type="radio" class="radio-input" formControlName="editor" value="TextArea" name="editor" />
 
                 <i class="icon-control-TextArea"></i>
 
                 <span class="radio-label">TextArea</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'RichText'">
-                <input type="radio" class="radio-input" formControlName="editor" value="RichText" />
+                <input type="radio" class="radio-input" formControlName="editor" value="RichText" name="editor" />
 
                 <i class="icon-control-RichText"></i>
 
                 <span class="radio-label">RichText</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Markdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Markdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Markdown" name="editor" />
 
                 <i class="icon-control-Markdown"></i>
 
                 <span class="radio-label">Markdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Dropdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" name="editor" />
 
                 <i class="icon-control-Dropdown"></i>
 
                 <span class="radio-label" clas>Dropdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Radio'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Radio" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Radio" name="editor" />
 
                 <i class="icon-control-Radio"></i>
 

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

@@ -26,21 +26,21 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Tags'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Tags" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Tags" name="editor" />
 
                 <i class="icon-control-Tags"></i>
 
                 <span class="radio-label">Tags</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Dropdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" name="editor" />
 
                 <i class="icon-control-Dropdown"></i>
 
                 <span class="radio-label" clas>Dropdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Checkboxes'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Checkboxes" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Checkboxes" name="editor" />
 
                 <i class="icon-control-Checkboxes"></i>
 

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

@@ -35,7 +35,7 @@
                 <div class="row no-gutters">
                     <div class="col-6 type">
                         <label>
-                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="false" />
+                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="false" name="singleton" />
                         
                             <div class="row no-gutters">
                                 <div class="col-auto">
@@ -53,7 +53,7 @@
                     </div>
                     <div class="col-6 type">
                         <label>
-                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="true" />
+                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="true" name="singleton" />
                         
                             <div class="row no-gutters">
                                 <div class="col-auto">