Reactive Form

A new Reactive Form will arrive in Smart UI 7.7.0. It will have two types of initialization. Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously. Reactive forms also provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested. Any consumers of the streams have access to manipulate that data safely. The purpose of our new Form component is to provide you an awesome and modern looking Form component, which is easy customizable and will help you to deliver better and professional looking web Forms.

Create a Form from HTML Template

It will be possible to create a new Smart.Form from an existing HTML Form component and will add validation, AJAX submit, control states such as: 'dirty', 'touched', 'pristine', 'valid', 'invalid'.
Example:

  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: ['']
        })
      });

Create a Form from JSON

The Form will be created dynamically from JSON object where we specify each Form Control and Form Group. Example:

 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'
					}
				]
			}
		]}
    );

The output of the above code is: