Smart.Form

• Getting Started
• Create Reactive Form
• Create Form from Tags
• Using React Form, FormControl and FormGroup
• Set Form Value
• Form Validation
• Angular
• React
• Vue

Getting Started

The Smart.Form control has two types of members: Smart.FormControl and Smart.FormGroup.

Smart.FormControl manages the value and validity status of an individual form control. It corresponds to an HTML form control such as 'input' or 'select'.
Smart.FormGroup manages the value and validity state of a group of Smart.FormControl instances. The group's properties include its child controls. The top-level form in your component is Smart.FormGroup.

Smart.FormControl and Smart.FormGroup have the following state properties:

• untouched - The field has not been touched yet
• touched - The field has been touched
• pristine - The field has not been modified yet
• dirty - The field has been modified
• invalid - The field content is not valid
• valid - The field content is valid

• .smart-valid
• .smart-invalid
• .smart-pristine
• .smart-dirty
• .smart-untouched
• .smart-touched

Create a Form from HTML Template

Creating a Reactive form with that approach is very easy and it is appropriate, when you migrate an existing Form to a Smart.Form

<form id="profileForm">
	<div class="smart-form-row">
		<label>
			First Name:
		</label>
		<smart-input class="underlined" form-control-name="firstName"></smart-input>
	</div>

	<div class="smart-form-row">
		<label>
			Last Name:
		</label>
		<smart-input class="underlined" form-control-name="lastName"></smart-input>
	</div>

	<div class="smart-form-row" form-group-name="address">
		<h3>Address</h3>

		<div class="smart-form-row">
			<label>
				Street:
			</label>
			<smart-input class="underlined" form-control-name="street"></smart-input>
		</div>

		<div class="smart-form-row">
			<label>
				City:
			</label>
			<smart-input class="underlined" form-control-name="city"></smart-input>
		</div>

		<div class="smart-form-row">
			<label>
				State:
			</label>
			<smart-input class="underlined" form-control-name="state"></smart-input>
		</div>

		<div class="smart-form-row">
			<label>
				Zip Code:
			</label>
			<smart-input class="underlined" form-control-name="zip"></smart-input>
		</div>
	</div>
	<div class="smart-form-row submit">
		<smart-button class="success" form-control-name="submit" type="submit">Submit</smart-button>
	</div>
</form>

const form = new Smart.Form('#profileForm', {
	firstName: ['', {
		validationRules: [
		   { type: 'required', message: 'First Name is required' },
		   { type: 'stringLength', min: 2, message: 'First Name requires minimum 2 characters' }
		]
	}],
	lastName: ['', {
	  validationRules: [{ type: 'required', message: 'Last Name is required' }]
	}
	],
	address: new Smart.FormGroup({
	  street: ['', {
		validationRules: [
			{ type: 'required', message: 'Street is required' }
		]
	  }
	  ],
	  city: [''],
	  state: [''],
	  zip: ['']
	})
});

form.firstName.value = "Peter";

Create a Form using Component tags

Smart.Form can be created from a special tag, called smart-form. The other supported custom elements are smart-form-group and smart-form-control.
All properties of Smart.FormGroup and Smart.FormControl can be set as attributes of the custom elements, if you choose to use that initialization approach.
When you create a Form from Tag, the Form instance is automatically created once the HTML is rendered on your web page. You do not need to create a Smart.Form, Smart.FormGroup and Smart.FormControl instances as these are created by the custom elements.

<smart-form id="profileForm">
	<smart-form-group id="employee" label="Employee" data-field="employee">
		<smart-form-group data-field="name">
			<smart-form-control column-span="2" label="Photo" control-type="template">
				<div style="overflow: hidden;"><img width="100" src="../../images/people/anne.png"/></div>
			</smart-form-control>
			<smart-form-control info="Enter First Name" required placeholder="First Name" control-type="input" data-field="firstName" label="First Name" class="outlined"></smart-form-control>
			<smart-form-control info="Enter Last Name" required placeholder="Last Name" control-type="input" data-field="lastName" label="Last Name" class="outlined"></smart-form-control>
		</smart-form-group>
		<smart-form-group label="Details" data-field="details">
			<smart-form-control placeholder="Company Name" required control-type="input" data-field="company" label="Company" class="outlined"></smart-form-control>
			<smart-form-control placeholder="Address" required control-type="input" data-field="address" label="Address" class="outlined"></smart-form-control>
			<smart-form-control placeholder="City" required control-type="input" data-field="city" label="City" class="outlined"></smart-form-control>
			<smart-form-control placeholder="State" required control-type="input" data-field="state" label="State" class="outlined"></smart-form-control>
			<smart-form-control placeholder="Zip / Postal Code" required control-type="input" data-field="zip" label="Zip / Postal Code" class="outlined"></smart-form-control>
		</smart-form-group>
		<smart-form-group columns="2">
			<smart-form-control align="right" control-type="submit" label="Submit" class="primary"></smart-form-control>
			<smart-form-control align="left" action="reset" control-type="button" label="Reset"></smart-form-control>
		</smart-form-group>
	</smart-form-group>
</smart-form>

/// 
window.onload = function() {
	const form = document.getElementById('profileForm');
	
    form.value = {
		employee: {
			name: {
				firstName: 'Anne',
				lastName: 'Smith',
			},
			details: {
				address: '1st Ave SW',
				company: 'N/A',
				city: 'Austin',
				state: 'Texas',
				zip: '78209'
			}
		}
	}

	document.getElementById('log').innerHTML = JSON.stringify(form.value);

    form.onValueChanges = function(value) {
        document.getElementById('log').innerHTML = JSON.stringify(value);
    }
}

Create a Form from JSON

  const form = new Smart.Form('#profileForm', {
		controls: [{
			controlType: 'group',
			columns: 2,
			label: 'Employee',
			dataField: 'employee',
			labelPosition: 'left',
			controls: [
				{
					label: 'Photo',
					template: '<div style=" overflow: hidden;"><img width="125" src="../../images/people/andrew.png"/></div>',
					controlType: 'template'
				},
				{
					label: 'Name',
					dataField: 'name',
					controlType: 'group',
					controls: [
						{
							dataField: 'firstName',
							controlType: 'input',
							label: 'First name',
							required: true,
							info: 'Enter first name',
							placeholder: 'First name',
							cssClass: 'outlined',
							infoPosition: 'right'
						},
						{
							dataField: 'lastName',
							controlType: 'input',
							label: 'Last name',
							placeholder: 'Last name',
							required: true,
							cssClass: 'outlined',
							info: 'Enter last name'
						}
					]
				},
				{
					label: 'Details',
					dataField: 'details',
					controlType: 'group',
					columnSpan: 2,
					controls: [
						{
							dataField: 'company',
							controlType: 'input',
							label: 'Company',
							placeholder: 'Company name',
							cssClass: 'outlined',
							required: false
						},
						{
							dataField: 'address',
							controlType: 'input',
							label: 'Address',
							placeholder: 'Address',
							required: true,
							cssClass: 'outlined'
						},
						{
							dataField: 'city',
							controlType: 'input',
							label: 'City',
							placeholder: 'City',
							cssClass: 'outlined',
							required: true
						},
						{
							dataField: 'state',
							controlType: 'dropdownlist',
							label: 'State',
							required: true,
							cssClass: 'outlined',
							controlOptions: {
								placeholder: 'State',
								dataSource: ['California', 'New York', 'Oregon', 'Illinois', 'Texas']
							}
						},
						{
							dataField: 'zip',
							controlType: 'input',
							placeholder: 'Zip',
							cssClass: 'outlined',
							label: 'Zip code',
							required: true
						}
					]
				}
			]
		},
		{
			controlType: 'group',
			columns: 2,
			controls: [
				{
					controlType: 'button',
					action: 'submit',
					label: 'Sign up',
					cssClass: 'success',
					align: 'right'
				},
				{
					controlType: 'button',
					action: 'reset',
					label: 'Cancel',
					align: 'left'
				}
			]
		}
	]}
);

Updating parts of the data model

When updating the value for a form group instance that contains multiple controls, you may only want to update parts of the model. This section covers how to update specific parts of a form control data model.
There are two ways to update the model value:

• Use the setValue() method or the value property to set a new value for an individual control. The setValue() method and value property strictly adheres to the structure of the form group and replaces the entire value for the control.
• Use the patchValue() method to replace any properties defined in the object that have changed in the form model.

Form Validation

You can improve overall data quality by validating user input for accuracy and completeness. This page shows how to validate user input from the UI and display useful validation messages.

{
	dataField: 'Email',
	label: 'Email',
	validationRules: [
		{type: 'email', message: 'Please enter a valid email'}
	],
	placeholder: 'Email',
	cssClass: 'outlined'
}

• "required" - Checks if the input is not empty
• "notNumber" - Checks if the input value is not numeric
• "startWithLetter" - Checks if the input value starts with letter
• "numeric" - Checks if the input value is numeric
• "phone" - Checks the input value for valid phone number /if this format doesn't work for your country, you should try type: 'pattern'/
• "stringLength" - Validates the length of input value. To work properly, you should pass also min and max properties
• "minLength" - Validates the length of input value. The min property should be set
• "maxLength" - Validates the length of input value. The max property should be set
• "pattern" - Checks if the input value matches the pattern from the pattern property
• "compare" - Checks if the input value matches the result of the user defined function, declared in the comparisonTarget property
• "range" - Validates numeric input value. To work properly, you should pass also min and max properties
• "custom" - Custom validation, that executes the user defined function in the validationCallback property.
• "email" - Checks if the input value is valid email
• "zipCode" - Checks if the input value is valid zip code
• "ssn" - Checks if the input value is valid ssn

npm install -g @angular/cli

ng new smart-angular-form

cd smart-angular-form

ng serve

npx create-next-app my-app
cd my-app
npm run dev	

yarn create next-app my-app
cd my-app
yarn run dev

npm run dev

yarn run dev

npm create vite@latest

yarn create vite

npm install smart-webcomponents-react

yarn add smart-webcomponents-react

import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { Form, FormGroup, FormControl } from 'smart-webcomponents-react/form';
import { Input } from 'smart-webcomponents-react/input';
import { NumericTextBox } from  'smart-webcomponents-react/numerictextbox';
import { MaskedTextBox } from  'smart-webcomponents-react/maskedtextbox';
import { Button } from  'smart-webcomponents-react/button';
import 'smart-webcomponents-react/source/modules/smart.form';

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {log: ""};
	}

	onValueChanges(value) {
		this.setState({ log: JSON.stringify(value) });
	}
	
	componentDidMount() {
	   // Create a Reactive Form.
		const form = new window.Smart.Form('#profileForm', {
			firstName: ['', {
				validationRules: [{
						type: 'required',
						message: 'First Name is required'
					},
					{
						type: 'stringLength',
						min: 2,
						message: 'First Name requires minimum 2 characters'
					}
				]
			}],
			lastName: ['', {
				validationRules: [{
					type: 'required',
					message: 'Last Name is required'
				}]
			}],
			address: new Smart.FormGroup({
				street: ['', {
					validationRules: [{
						type: 'required',
						message: 'Street is required'
					}]
				}],
				city: [''],
				state: [''],
				zip: ['']
			})
		});

		// set form's value.
		form.value = {
			firstName: 'Peter',
			lastName: 'Smith',
			address: {
				street: '507 - 20th Ave. E. Apt. 2A',
				city: 'Seattle',
				state: 'WA',
				zip: '98122'
			}
		}
		
		form.onValueChanges = this.onValueChanges.bind(this);
	}

	render() {
		return (
			<div>
				<div className="demo-description">This example shows how to create a Reactive Form with Validation.</div>
				<form id="profileForm">
					<div className="smart-form-row">
						<label>First Name:</label>
						<input className="smart-input underlined" form-control-name="firstName"></input>
					</div>
					<div className="smart-form-row">
						<label>Last Name:</label>
						<input className="smart-input underlined" form-control-name="lastName"></input>
					</div>
					<div className="smart-form-row" form-group-name="address">
						 <h3>Address</h3>
						<div className="smart-form-row">
							<label>Street:</label>
							<input className="smart-input underlined" form-control-name="street"></input>
						</div>
						<div className="smart-form-row">
							<label>City:</label>
							<input className="smart-input underlined" form-control-name="city"></input>
						</div>
						<div className="smart-form-row">
							<label>State:</label>
							<input className="smart-input underlined" form-control-name="state"></input>
						</div>
						<div className="smart-form-row">
							<label>Zip Code:</label>
							<input className="smart-input underlined" form-control-name="zip"></input>
						</div>
					</div>
					<div className="smart-form-row submit">
						<Button className="success" form-control-name="submit" type="submit">Submit</Button>
					</div>
				</form>
				<h3>Form Value:</h3>
				<div>{this.state.log}</div>
			</div>
		);
	}
}



export default App;
	

npm create vue@latest

✔ Project name: … 
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./...
Done.

cd 
npm install
npm install smart-webcomponents
npm run dev

npm run dev

npm run build