RadioField component

src/app/_mock/testfields.ts

@@ -1,6 +1,9 @@
 import { ValueTransformer } from './../dynaform/interfaces';
 import * as fmd from './../dynaform/models'; // fmd = Form Meta Data
 
+// ---------------------------------------------------------------------------------------------------------------------
+// Native
+
 const basicTextField = new fmd.TextField({
 	name: 'basicTextField',
 	label: 'Field One',
@@ -29,6 +32,14 @@ const selectField = new fmd.SelectField({
 	options: ['', 'Apples', 'Oranges', 'Pears', 'Gorgonzola']
 });
 
+const radioField = new fmd.RadioField({
+	name: 'radioField',
+	options: ['Tea', 'Coffee', 'Cocoa', 'Yerba Maté']
+});
+
+// ---------------------------------------------------------------------------------------------------------------------
+// Custom
+
 const checkButton = new fmd.CheckbuttonField({
 	name: 'checkButton',
 	value: '456'
@@ -72,6 +83,9 @@ const dropDownModifiedInput = new fmd.DropdownModifiedInputField({
 	transform: transformerFunctions
 });
 
+// ---------------------------------------------------------------------------------------------------------------------
+// Kendo
+
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const formMetaDataObj = {
@@ -80,6 +94,7 @@ export const formMetaDataObj = {
 	textareaField,
 	passwordField,
 	selectField,
+	radioField,
 	checkButton,
 	dropDownModifiedInput
 };

src/app/dynaform/components/index.ts

@@ -5,6 +5,7 @@ export { TextComponent } from './native/text/text.component';
 export { TextareaComponent } from './native/textarea/textarea.component';
 export { PasswordComponent } from './native/password/password.component';
 export { SelectComponent } from './native/select/select.component';
+export { RadioComponent } from './native/radio/radio.component';
 export { DropdownModifiedInputComponent } from './custom/dropdown-modified-input/dropdown-modified-input.component';
 export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
 // export { CheckbuttonGroupComponent } from './custom/checkbutton-group/checkbutton-group.component';

src/app/dynaform/components/native/radio/radio.component.html

@@ -1,4 +1,4 @@
-<span *ngFor="let opt of options">
-	<input type="radio" [formControl]="control" [value]="opt.value" class="form-control form-control-sm">
-	{{ opt.label }}
-</span>
+<div *ngFor="let opt of options; let i = index;" class="custom-control custom-radio">
+	<input type="radio" [formControl]="control" [value]="opt.value" [id]="name + i" class="custom-control-input">
+	<label class="custom-control-label" [for]="name + i">{{ opt.label }}</label>
+</div>

src/app/dynaform/components/native/radio/radio.component.ts

@@ -8,6 +8,6 @@ import { NativeInputComponent } from '../../_abstract/native-input/native-input.
 })
 export class RadioComponent extends NativeInputComponent {
 
-	exposeMetaInTemplate: string[] = ['options'];
+	exposeMetaInTemplate: string[] = ['name', 'options'];
 
 }

src/app/dynaform/components/native/select/select.component.html

@@ -1,3 +1,3 @@
-<select [formControl]="control" class="form-control form-control-sm">
+<select [formControl]="control" class="custom-select custom-select-sm">
 	<option *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</option>
 </select>

src/styles.scss

@@ -12,6 +12,8 @@ h1 {
 div.col-sm-4 {
 	background-color: lavenderblush;
 	border-top: 3px white solid;
+	padding-top: 2px;
+	margin-bottom: 3px;
 }
 
 .red input { 
@@ -22,7 +24,10 @@ div.col-sm-4 {
 	background-color: rgb(230, 243, 243) !important;
 }
 
-#yoyo input {
-	border-color: purple;
-	border-width: 2px;
+#yoyo {
+	input {
+		border-color: purple;
+		border-width: 2px;
+		width: 50%;
+	}
 }