---
title: Angular Form with UX4G
framework: angular
---

# Angular Form Example

## angular.json

```json
{
  "styles": [
    "node_modules/ux4g-web-components/styles/ux4g.css",
    "src/styles.css"
  ],
  "scripts": [
    "node_modules/ux4g-web-components/dist/runtime/design-system.js"
  ]
}
```

## app.component.html

```html
<div class="ux4g-container ux4g-py-xl">
  <div class="ux4g-card ux4g-p-xl ux4g-max-w-600 ux4g-mx-auto">
    <h1 class="ux4g-heading-m-strong ux4g-mb-l">Apply for Certificate</h1>

    <form (ngSubmit)="onSubmit()">
      <div class="ux4g-form-field-group ux4g-mb-l">
        <label class="ux4g-label-m-medium" for="fullName">Full Name</label>
        <input id="fullName" class="ux4g-input" type="text" [(ngModel)]="model.name" name="name" required />
      </div>

      <div class="ux4g-form-field-group ux4g-mb-l">
        <label class="ux4g-label-m-medium" for="email">Email</label>
        <input id="email" class="ux4g-input" type="email" [(ngModel)]="model.email" name="email" required />
      </div>

      <div class="ux4g-form-field-group ux4g-mb-l">
        <label class="ux4g-label-m-medium" for="service">Service</label>
        <select id="service" class="ux4g-select" [(ngModel)]="model.service" name="service">
          <option>Income Certificate</option>
          <option>Caste Certificate</option>
          <option>Domicile Certificate</option>
        </select>
      </div>

      <button class="ux4g-btn-primary ux4g-btn-md ux4g-w-100" type="submit">Submit</button>
    </form>
  </div>
</div>
```

## Notes

- Use exact class names from [Input](../components/input.md), [Select](../components/select.md), and [Button](../components/buttons.md) docs.
- Ensure `FormsModule` is imported in the component module.