Forms - Overview

DevExtreme Angular Form is a responsive UI component for viewing and editing data. This component represents a data object as a collection of label-editor pairs. It is available for Angular and thus supports AOT compilation, TypeScript compile-time checking, and declarative configuration. This demo shows how to add and customize the Form on a page. DevExtreme provides other widgets, like Filter Builder, Range Selector, Radio Group, which are more specialized. You can find their demos and more demos of the Form in this section.

Backend API

@using DevExtreme.NETCore.Demos.ViewModels @model FormViewModel <div id="form"> @(Html.DevExtreme().Form<FormViewModel>() .ID("form") .Items(items => { items.AddGroup() .CssClass("first-group") .ColCount(4) .Items(groupItems => { groupItems.AddSimple().Template("<div class='form-avatar'></div>"); groupItems.AddGroup().ColSpan(3).Items(secondGroupItems => { secondGroupItems.AddSimpleFor(m => m.FirstName); secondGroupItems.AddSimpleFor(m => m.LastName); secondGroupItems.AddSimpleFor(m => m.BirthDate) .Editor(e => e .DateBox() .InputAttr("aria-label", "Date") .Width("100%") ) .IsRequired(false); }); }); items.AddGroup() .CssClass("second-group") .ColCount(2) .Items(groupItems => { groupItems.AddGroup().Items(secondGroupItems => { secondGroupItems.AddSimpleFor(m => m.Address); secondGroupItems.AddSimpleFor(m => m.City); secondGroupItems.AddSimpleFor(m => m.Position) .Editor(e => e .SelectBox() .InputAttr("aria-label", "Position") .DataSource(new[] { "HR Manager", "IT Manager", "CEO", "Controller", "Sales Manager", "Support Manager", "Shipping Manager" } ) .Value("") ); }); groupItems.AddGroup().Items(secondGroupItems => { secondGroupItems.AddSimpleFor(m => m.State) .Editor(e => e .SelectBox() .InputAttr("aria-label", "State") .DataSource(new[] { "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" } ) ); secondGroupItems.AddSimpleFor(m => m.Zipcode).Label(l => l.Text("Zip Code")); secondGroupItems.AddSimpleFor(m => m.Phone) .Editor(e => e .TextBox() .Mask("+1 (000) 000-0000") .InputAttr("aria-label", "Mask") ); }); groupItems.AddSimpleFor(m => m.Notes) .ColSpan(2) .Editor(e => e .TextArea() .InputAttr("aria-label", "Notes") .Height(140) ); }); }) .FormData(Model) ) </div>

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using DevExtreme.AspNet.Mvc; using DevExtreme.AspNet.Data; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using DevExtreme.NETCore.Demos.Models.DataGrid; // For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860 namespace DevExtreme.NETCore.Demos.Controllers { public class CommonController : Controller { public ActionResult FormsOverview() { return View(new FormViewModel { ID = 1, FirstName = "John", LastName = "Heart", Position = "CEO", BirthDate = DateTime.Parse("1964 /03/16"), HireDate = DateTime.Parse("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", Phone = "555-684-1335", Email = "jheart@dx-email.com", Skype = "jheart_DX_skype", }); } } }

using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.ViewModels { public class FormViewModel { public int ID { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string CompanyName { get; set; } public string Position { get; set; } public string OfficeNo { get; set; } public DateTime BirthDate { get; set; } public DateTime HireDate { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public string Zipcode { get; set; } public string Phone { get; set; } public string Email { get; set; } public string Skype { get; set; } public string Notes { get; set; } } public class DynamicFormViewModel { public string FirstName { get; set; } public string LastName { get; set; } public string Address { get; set; } public string City { get; set; } public List<string> Phones { get; set; } } public class SmartPasteFormViewModel { public string AmountDue { get; set; } public DateTime StatementDate { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string PhoneNumber { get; set; } public string Email { get; set; } public string StreetAddress { get; set; } public string City { get; set; } public string State { get; set; } public string ZIP { get; set; } } }

.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; }