1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import FormModule from smart-webcomponents-angular/form: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { FormModule } from 'smart-webcomponents-angular/form';

4 Root component (standalone)

Add FormModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { Smart } from 'smart-webcomponents-angular/form';

import { FormModule } from 'smart-webcomponents-angular/form';

import { ButtonModule } from 'smart-webcomponents-angular/button';

import { DropDownListModule } from 'smart-webcomponents-angular/dropdownlist';

import { NumericTextBoxModule } from 'smart-webcomponents-angular/numerictextbox';

import { CheckBoxModule } from 'smart-webcomponents-angular/checkbox';

import { RadioButtonModule } from 'smart-webcomponents-angular/radiobutton';

import { DateTimePickerModule } from 'smart-webcomponents-angular/datetimepicker';

import { MaskedTextBoxModule } from 'smart-webcomponents-angular/maskedtextbox';

import { InputModule } from 'smart-webcomponents-angular/input';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ ButtonModule, InputModule, CheckBoxModule, MaskedTextBoxModule, DateTimePickerModule, RadioButtonModule, NumericTextBoxModule, DropDownListModule, FormModule ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App implements AfterViewInit, OnInit {
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// Create a Reactive 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: ['']
			})
		});

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



		// handle value changes and log them.
		form.onValueChanges = function (value: any) {
			const log = document.getElementById('log')

			if (!log) { return }

			log.innerHTML = JSON.stringify(value);
		}

		// log Form's value
		const log = document.getElementById('log')

		if (!log) { return }

		log.innerHTML = JSON.stringify(form.value);
	}
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-form as needed:

 <div class="demo-description">This example shows how to create a Reactive Form with Validation.</div>
<form
id="profileForm">
    <div class="smart-form-row">
        <label>First Name:</label>
        <smart-input #input class="underlined" form-control-name="firstName"></smart-input>
    </div>
    <div class="smart-form-row">
        <label>Last Name:</label>
        <smart-input #input2 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 #input3 class="underlined" form-control-name="street"></smart-input>
        </div>
        <div class="smart-form-row">
            <label>City:</label>
            <smart-input #input4 class="underlined" form-control-name="city"></smart-input>
        </div>
        <div class="smart-form-row">
            <label>State:</label>
            <smart-input #input5 class="underlined" form-control-name="state"></smart-input>
        </div>
        <div class="smart-form-row">
            <label>Zip Code:</label>
            <smart-input #input6 class="underlined" form-control-name="zip"></smart-input>
        </div>
    </div>
    <div class="smart-form-row submit">
        <smart-button #button class="success" form-control-name="submit" type="submit">Submit</smart-button>
    </div>
    </form>
    <br />
    <br />
    <div id="log"></div>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put FormModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put FormModule from smart-webcomponents-angular/form on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormModule } from 'smart-webcomponents-angular/form';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, FormModule ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.