# msx-ui-forms

**Repository Path**: mirrors_CiscoDevNet/msx-ui-forms

## Basic Information

- **Project Name**: msx-ui-forms
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-22
- **Last Updated**: 2026-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @msx/form

## Description

Package containing a form builder renderer for use within MSX as well as the upgraded form inputs for use in Angular 8.

## Installation

This module is already installed in `msx-ui`, and can be used by importing the
`MsxCommonModule` from `@msx/common`:

```typescript
import { NgModule } from '@angular/core';
import { MsxFormsModule } from '@msx/forms';

@NgModule({
  imports: [
    MsxFormsModule
  ]
})
export class MyModule {}
```

## Testing

If you are testing your component using Angular's `TestBed`, import the
`MsxFormsTestingModule` in your testing module instead of `MsxFormsModule` to
have `@msx/forms`'s components and directives mocked.

```typescript
import {
  async,
  ComponentFixture,
  TestBed
} from '@angular/core/testing';
import { MsxFormsTestingModule } from '@msx/forms/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MsxFormsTestingModule
      ],
      declarations: [MyComponent]
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  }));
});
```

## Form inputs

The upgraded form inputs that can be used are also included in the `MsxFormModule`. You can find the upgraded components [here](src/fields)

## Form Builder/Renderer

This package contains the `Form` and `FormGroup` classes that are the basis for being a structure for your form. It also contains the `DynamicFormComponent` that takes instances of the `Form` and `FormGroup` to automatically render and handle the change lifecycle of the fields within them. 

**Note: If fields are added to a Form and a FormGroup you must render 2 dynamic form components as fields are encapsulated into the instance of where they are added even if all values are available in the top level form**

The following is an example of how to use the dynamic forms using a `Form` and a `FormGroup`. This example uses `Angular 8` but you can build forms (without the dynamic rendering) with any (or no) framework.
```typescript

@Component({
    selector: 'my-component',
    template: `
    <div>
        <div>
            <h1>Name Information</h1>
            <msx-form [form]="nameForm"></msx-form>
        </div>
        <div>
            <h1>Location Information</h1>
            <!--Without passing the locationFormGroup, the address and postal code fields would never show  -->
            <msx-form [form]="locationFormGroup"></msx-form>
        </div>
    </div>
`
})
class MyComponent { 

    nameForm = new Form();
    locationFormGroup = new FormGroup('locationGroup');

    ngOnInit() {
        this.nameForm.setFields([
            { 
                name: "firstName",
                initialValue: "",
                properties: {
                    label: "First Name",
                    required: true,
                    placeholder: "Johny"
                }
            },
            { 
                name: "lastName",
                initialValue: "",
                properties: {
                    label: "Last Name",
                    required: true,
                    placeholder: "Bravo"
                }
            }
        ]);

        this.locationGroup.setFields([
            { 
                name: "address",
                initialValue: "",
                properties: {
                    required: true,
                    label: "Address",
                    placeholder: "123 Somewhere Lane"
                }
            },
            { 
                name: "postalCode",
                initialValue: "",
                properties: {
                    label: "Postal Code",
                    required: true,
                    placeholder: "K0F K8A"
                }
            }
        ]);


        this.nameForm.setFormGroup(this.locationGroup);
    }
}
```

The example above would render a section header `Name Information` with 2 fields (firstName, lastName) and another section header `Location Information` with the 2 fields (address and postal code). Note that **2** `msx-form` components where used, one for the `Form` and one for the `FormGroup`. This is because fields are encapsulated where they are added. However, the `Form` will still know when a field from a child `FormGroup` changes. 





## Other Resources

* [Form Builder information](src/form-builder/README.md)
* [Dynamic Form information](src/dynamic-form/README.md)