<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@4.1.1" data-semver="4.1.1" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script data-require="angular-messages@1.5.5" data-semver="1.5.5" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container"ng-app="test" ng-controller="MainCtrl">
<div class="row">
<div class="col-12">
<h1>Form Radio Test</h1>
<p ng-show="message">{{message}}</p>
<form name="frm" novalidate="" ng-submit="save()">
<div ng-repeat="field in fields">
<label>{{field.label}}</label>
<div class="form-check">
<div ng-repeat="opt in field.options track by $index">
<input class="form-check-input"
type="radio"
ng-model="field.value[0]"
ng-required="field.required"
ng-value="opt" />
<label class="form-check-label">{{opt}}</label>
</div>
</div>
</div>
<div ng-messages="frm.$error" ng-if="frm.$submitted">
<div ng-message="required" class="text-danger">Required</div>
</div>
<div class="form-group">
<button type="submit" ng-disabled="frm.$invalid" class="btn btn-primary">Submit</button>
<button class="btn btn-secondary" ng-click="clear($event)">Clear</button>
</div>
<pre>
{{frm.$error | json}}
</pre>
</form>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module('test', ['ngMessages']);
app.controller('MainCtrl', function($scope){
$scope.fields = [
{
label: 'Is this cool?',
options: [
"Yes",
"No",
"Maybe"
],
required: true,
value: []
}
];
$scope.save = function() {
$scope.message = "Saved";
};
$scope.clear = function(evt) {
$scope.message = undefined;
evt.preventDefault();
angular.forEach($scope.fields, function(field){
field.value = [];
});
};
});
/* Styles go here */