var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.formOptions = {
formData: employee,
items: [{
itemType: "group",
cssClass: "first-group",
colCount: 4,
items: [{
template: "<div class='form-avatar'></div>"
}, {
itemType: "group",
colSpan: 3,
items: [{
dataField: "FirstName"
}, {
dataField: "LastName"
}, {
dataField: "BirthDate",
editorType: "dxDateBox",
editorOptions: {
width: "100%"
}
}]
}]
}, {
itemType: "group",
cssClass: "second-group",
colCount: 2,
items: [{
itemType: "group",
items: [{
dataField: "Address"
}, {
dataField: "City"
}, {
dataField: "Position",
editorType: "dxSelectBox",
editorOptions: {
items: positions,
value: ""
}
}]
}, {
itemType: "group",
items: [{
dataField: "State",
editorType: "dxSelectBox",
editorOptions: {
items: states
},
}, {
dataField: "ZipCode"
}, {
dataField: "Mobile",
label: {
text: "Phone"
},
editorOptions: {
mask: "+1 (000) 000-0000"
}
}]
}, {
colSpan: 2,
dataField: "Notes",
editorType: "dxTextArea",
editorOptions: {
height: 140
}
}]
}]
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div dx-form="formOptions"></div>
</div>
</body>
</html>
.first-group,
.second-group {
padding: 20px;
}
.second-group {
background-color: rgba(191, 191, 191, 0.15);
}
.form-avatar {
height: 128px;
width: 128px;
margin-right: 10px;
border: 1px solid #d2d3d5;
border-radius: 50%;
background-image: url('../../../../images/petersmith.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
var employee = {
"ID": 1,
"FirstName": "John",
"LastName": "Heart",
"Position": "CEO",
"BirthDate": "1964/03/16",
"HireDate": "1995/01/15",
"Notes": "John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.",
"Address": "351 S Hill St.",
"City": "Los Angeles",
"State": "CA",
"ZipCode": "90013",
"Home": "555-684-1334",
"Mobile": "555-684-1335",
"Email": "jheart@dx-email.com",
"Skype": "jheart_DX_skype",
};
var positions = [
"HR Manager",
"IT Manager",
'CEO',
"Controller",
"Sales Manager",
"Support Manager",
"Shipping Manager"
];
var states = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"];