SHIBUI-1467 updated radio components

TIER · Nov 14, 2019 · 50a2511 · 50a2511
1 parent c0dd943
commit 50a2511
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -6,17 +6,24 @@
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
-    <div *ngFor="let option of schema.oneOf; let i=index;" class="form-check form-check-inline">
-        <label class="control-label">
-            <input
-                [id]="formProperty._canonicalPath + '.' + option.enum[0]"
-                [formControl]="control"
-                [name]="name"
-                [value]="option.enum[0]"
-                type="radio"
-                [attr.disabled]="schema.readOnly">&nbsp;
-            <translate-i18n [key]="option.description">{{ option.description }}</translate-i18n>
-        </label>
+    <div class="d-flex">
+        <ng-container *ngFor="let option of schema.oneOf; let i=index;">
+            <div class="custom-control custom-radio custom-control-inline">
+                <input
+                    disableValidation="true"
+                    class="custom-control-input"
+                    [id]="formProperty._canonicalPath + '.' + option.enum[0]"
+                    [formControl]="control"
+                    [name]="name"
+                    [value]="option.enum[0]"
+                    type="radio"
+                    [attr.disabled]="schema.readOnly">
+                <label
+                    class="custom-control-label"
+                    [for]="formProperty._canonicalPath + '.' + option.enum[0]"
+                    [translate]="option.description">{{ option.description }}</label>
+            </div>
+        </ng-container>
     </div>
     <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
 </div>
diff --git a/ui/src/app/schema-form/widget/radio/radio.component.html b/ui/src/app/schema-form/widget/radio/radio.component.html
@@ -2,10 +2,16 @@
     <label [translate]="schema.title">{{schema.title}}</label>
     <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
     <ng-container *ngFor="let option of schema.oneOf; let i = index;">
-        <div class="form-check" [ngClass]="schema.widget.class">
-            <input class="form-check-input" [formControl]="control" type="radio" [attr.name]="name" [id]="formProperty._canonicalPath + '.' + i" [value]="option.enum[0]" [attr.disabled]="schema.readOnly">
-            <label class="form-check-label" [for]="name" [translate]="option.description">{{option.description}}</label>
+        <div class="custom-control custom-radio custom-control-inline" [ngClass]="schema.widget.class">
+            <input class="custom-control-input"
+                [formControl]="control"
+                type="radio"
+                [attr.name]="name"
+                [id]="formProperty._canonicalPath + '.' + i"
+                [value]="option.enum[0]"
+                [attr.disabled]="schema.readOnly"
+                disableValidation="true">
+            <label class="custom-control-label" [for]="formProperty._canonicalPath + '.' + i" [translate]="option.description">{{option.description}}</label>
         </div>
     </ng-container>
-    <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
 </div>