consumerportal/views/acctmgmt/personaldetails.html

mydna Custimised for you

<script>
	(function (i, s, o, g, r, a, m) {
	i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
		(i[r].q = i[r].q || []).push(arguments)	
}, i[r].l = 1 * new Date(); a = s.createElement(o),
		m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
	})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

	ga('create', 'UA-69139205-6', 'auto');
	ga('set', {
		page: '/acctmgmt/personaldetails.html',
		title: 'Personal Details'
	});
	ga('send', 'pageview');

</script>

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class='content_block content_blocks_padding'>

				<h1>My Profile</h1>
				<nav class="navbar navbar-default">
					<ul class="nav navbar-nav">
						<li><a href="#/acctmgmt/personaldetails" class="active">Personal Details</a></li>
						<li><a href="#/acctmgmt/contactdetails">Contact Details</a></li>
					</ul>
				</nav>	

				<div class="alert alert-danger" ng-show="vm.showErrors && myForm.$invalid" >
					<p>Please correct the highlighted fields.</p>
				</div>

				<div class="alert alert-info" ng-show="vm.showErrors && myForm.$valid"	>
					<p>All issues have been resolved.</p>
				</div>

				<div class="alert alert-success" ng-show="vm.savedSuccessfully" >
					<p>Your Personal Details have been saved.</p>
				</div>
			
				<form name="myForm" class="form-horizontal" novalidate="" ng-submit="" autocomplete="off">
					<h3>Personal Details</h3>
					
					<div class="form-group">
						<label class="control-label col-sm-2" for="FirstName">First Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" ng-model="vm.frm.FirstName" name="FirstName" id="FirstName" ng-class="{'error-branch' : vm.showErrors && myForm.FirstName.$invalid}"
								tabindex="{{vm.tabIndexValue}}" ng-required="true" ng-minlength="2" />
							<div class="errorWrap">
								<div ng-messages="myForm.FirstName.$error" ng-show="vm.showErrors && myForm.FirstName.$invalid">
									<div ng-message="required">Enter a First Name</div>
									<div ng-message="minlength">First Name is too short</div>
								</div>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-2" for="MiddleName">Middle Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" ng-model="vm.frm.MiddleName" name="MiddleName" id="MiddleName" ng-class="{'error-branch' : vm.showErrors && myForm.MiddleName.$invalid}"
								tabindex="{{vm.tabIndexValue}}" ng-minlength="1" ng-maxlength="20" />
							<div class="errorWrap">
								<div ng-messages="myForm.MiddleName.$error" ng-show="vm.showErrors && myForm.MiddleName.$invalid">
									<div ng-message="required">Enter a Middle Name</div>
									<div ng-message="minlength">Middle Name is too short</div>
								</div>
							</div>
						</div>		
					</div>

					<div class="form-group">
						<label class="control-label col-sm-2" for="LastName">Last Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" ng-model="vm.frm.LastName" id="LastName" name="LastName" ng-required="true" ng-minlength="2"
								ng-class="{'error-branch' : vm.showErrors && myForm.LastName.$invalid}" tabindex="{{vm.tabIndexValue}}" />
							<div class="errorWrap">
								<div ng-messages="myForm.LastName.$error" ng-show="vm.showErrors && myForm.LastName.$invalid">
									<div ng-message="required">Enter a Last Name</div>
									<div ng-message="minlength">Last Name is too short</div>
								</div>
							</div>
						</div>		
					</div>

					<div class="form-group">
						<label class="control-label col-sm-2" for="dob">Date of Birth</label>
						<div class="col-sm-10">
							<input rsmdatedropdowns date-format="dd/MM/yyyy" ng-required="true" name="dob" id="dob" ng-model="vm.frm.dob" day-div-class="day-container"
								day-class="form-control day-selector" month-div-class="month-container" month-class="form-control month-selector" year-div-class="year-container"
								year-class="form-control year-selector" ng-class="{'error-branch' : vm.showErrors && myForm.dob.$invalid}" tabindex="{{vm.tabIndexValue}}"
							/>
							<div class="errorWrap">
								<div ng-messages="myForm.dob.$error" ng-show="vm.showErrors && myForm.dob.$invalid">
									<div ng-message="mydnaValidator">Enter a valid date (dd/mm/yyyy)</div>
								</div>
							</div>
						</div>	
					</div>

					<div class="form-group">
						<label class="control-label col-sm-2" for="Gender">Gender</label>
						<div class="col-sm-10">
							<div class="radio">
								<label class="radio-inline"><input type="radio" name="Gender" value="M" ng-model="vm.frm.Gender"  required/>Male</label>
								<label class="radio-inline"><input type="radio" name="Gender" value="F" ng-model="vm.frm.Gender"  required/>Female</label>
								<label class="radio-inline"><input type="radio" name="Gender" value="O" ng-model="vm.frm.Gender"  required/>Other/Unspecified</label>
							</div>
						</div>	
					</div>
					<div class="errorWrap">
						<div ng-messages="myForm.Gender.$error" ng-show="vm.showErrors && myForm.Gender.$invalid">
							<div ng-message="required">Please Select a Gender</div>
						</div>
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<p>&nbsp;</p>
							<button class="btn btn-primary" ng-click="vm.savePersonalDetails()">Save Changes</button>
						</div>
					</div>
				</form>
				<div style="clear:both;"></div>
			</div>	
		</div>
	</div>	
</div>
<route-change-interrupt active="myForm.$dirty"></route-change-interrupt>