> For the complete documentation index, see [llms.txt](https://msk-satheesh-5599.gitbook.io/ng-mat-forms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://msk-satheesh-5599.gitbook.io/ng-mat-forms/attributes/fields.md).

# Fields

Type of the options is   **NgMatFormField.**

**Example.**

```typescript
import {NgMatFormOptions,NgMatFormFields} from 'ng-mat-forms';
// other imports here...

export class MyTestApp {

    // Initialized a field list array which extended a 
    field interface.
    public ngMatFormFields: NgMatFormFields[] = [{
        type: 'input',
        label: 'User Name',
        placeholder: 'Enter a User Name',
        formControlName: 'name'
        // other options...
    }, {
        type: 'select',
        label: 'Password',
        placeholder: 'Enter a Password',
        formControlName: 'password',
        list: [
            {
                name: 'Option 1',
                value: 'Option1',
                type: 'option'
            },
            {
                name: 'Option 2',
                value: 'Option2',
                type: 'option'
            }
        ]
        // other options...
    }];

    constructor() { }
}
```

Here are the articles in this section:

{% content-ref url="/pages/-LvhRPuPf6ia0ayvZcHz" %}
[type](/ng-mat-forms/attributes/fields/type.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhWNsHeOqJbF9WH73F" %}
[label](/ng-mat-forms/attributes/fields/label.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhXKBlqTkyRbUiNRs\_" %}
[placeholder](/ng-mat-forms/attributes/fields/placeholder.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhXUQW-yMvs9TREtdx" %}
[formControlName](/ng-mat-forms/attributes/fields/formcontrolname.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhY4NoeHBe8-8HqN5e" %}
[directive](/ng-mat-forms/attributes/fields/directive.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhYiAfT4kNL1Ge-a7A" %}
[regex](/ng-mat-forms/attributes/fields/regex.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhZ1qQA5bNjeSCkP8i" %}
[defaultValue](/ng-mat-forms/attributes/fields/defaultvalue.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhZPAhqHmYvs\_nBJ-M" %}
[validators](/ng-mat-forms/attributes/fields/validators.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhZfZAl6Jon5VSiK-p" %}
[list](/ng-mat-forms/attributes/fields/list.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LvhaFfsOLcMoK7KI7po" %}
[disable](/ng-mat-forms/attributes/fields/disable.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Lvh\_7Qk6H8x\_xRMTd2D" %}
[labelShow](/ng-mat-forms/attributes/fields/labelshow.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Lvh\_TrGjHIkwCxSmcM4" %}
[minDate](/ng-mat-forms/attributes/fields/mindate.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Lvh\_zHQo9nKpN-VgMf5" %}
[maxDate](/ng-mat-forms/attributes/fields/maxdate.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwAyT366oNj5vBBKbMF" %}
[changeEvents](/ng-mat-forms/attributes/fields/changeevents.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwBN2LF7RoN09a--D3g" %}
[blurEvents](/ng-mat-forms/attributes/fields/blurevents.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwBNLFq8sGkCVC960b-" %}
[maxLength](/ng-mat-forms/attributes/fields/maxlength.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Lvh\_TrGjHIkwCxSmcM4" %}
[minDate](/ng-mat-forms/attributes/fields/mindate.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwBNjmiju8xawesf7qN" %}
[getListFromApi](/ng-mat-forms/attributes/fields/getlistfromapi.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwBOQzEDtUtsi2rZIOS" %}
[api](/ng-mat-forms/attributes/fields/api.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwBQXbDM7kl4S-AbvAo" %}
[loadDepenentSelectOnChange](/ng-mat-forms/attributes/fields/loaddepenentselectonchange.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LwBRw2-dCShVoEaGERG" %}
[errorMessage](/ng-mat-forms/attributes/fields/errormessage.md)
{% endcontent-ref %}
