<commit_before>[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/formly-js/angular-formly?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

# Angular-Formly: Ionic Framework Templates

This is a template for [angular-formly](http://github.com/formly-js/angular-formly) and [Ionic](http://ionicframework.com/). This library is not standalone and requires angular-formly to be present and loaded.

### Install with Bower

```bash
$ bower install api-check angular-formly angular-formly-templates-ionic --save
```

Reference the files in your `index.html`

```html
<!-- right below ionic.bundle.js -->
<script src="lib/api-check/dist/api-check.js"></script>
<script src="lib/angular-formly/dist/formly.js"></script>
<script src="lib/angular-formly-templates-ionic/dist/angular-formly-templates-ionic.js"></script>
```

Then import the templates into your project.

```javascript
angular.module("myApp", ["ionic", "formlyIonic"])
```

And your"re ready!

## Documentation

See [angular-formly](http://docs.angular-formly.com) for formly core documentation.

### Common Properties

NOTE: All of these properties will be under the `templateOptions` property as of angular-formly 3.0.0

---
##### label (string)
>`label` is used to add an html label to each field.

###### Default
>`undefined`

---
##### required (boolean)
>`required` is used to add the required attribute to a form field.

###### Default
>`undefined`

---
##### disabled (boolean)
>`disabled` is used to add the disabled attribute to a form field.

###### Default
>`undefined`

---
##### placeholder (string)
>`placeholder` is used to add placeholder text to some inputs.

###### Default
>`undefined`

---
##### description (string)
>`description` is used to add descriptive text to all inputs.

###### Default
>`undefined`

---
##### addonLeft (object)
>`addonLeft` is used to add an add-on on the left of a field. The object accepts three properties: `text` that sets a simple text, `onClick` will add a `cursor:pointer` and an ng-click to the addon (invoked with the options and scope), and `class` that sets classes to the add-on.

###### Default
>`undefined`

---
##### addonRight (object)
>`addonRight` is used to add an add-on on the right of a field. The object accepts three properties: `text` that sets a simple text, `onClick` will add a `cursor:pointer` and an ng-click to the addon (invoked with the options and scope), and `class` that sets classes to the add-on.

###### Default
>`undefined`

### Fields

### Form Fields

Below is a detailed description of each form fields and its custom properties.

#### Input form field (with Placeholder labels)
>Uses the placeholder attribute to simulate the input"s label. The input uses the `<input>` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

_Example text field_
```json
{
  "type": "input",
  "key": "firstName",
  "templateOptions": {
    "type": "text",
    "placeholder": "<NAME>",
    "icon": "ion-person",
    "iconPlaceholder": true
  }
}
```

---

#### Input form field (with Stacked labels)
>Stacked labels always places the label on top of the input. The input uses the `<input>` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

_Example text field_<commit_msg>add documentation for inline-labels Closes #28. Closes #27<commit_after>[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/formly-js/angular-formly?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

# Angular-Formly: Ionic Framework Templates

This is a template for [angular-formly](http://github.com/formly-js/angular-formly) and [Ionic](http://ionicframework.com/). This library is not standalone and requires angular-formly to be present and loaded.

### Install with Bower

```bash
$ bower install api-check angular-formly angular-formly-templates-ionic --save
```

Reference the files in your `index.html`

```html
<!-- right below ionic.bundle.js -->
<script src="lib/api-check/dist/api-check.js"></script>
<script src="lib/angular-formly/dist/formly.js"></script>
<script src="lib/angular-formly-templates-ionic/dist/angular-formly-templates-ionic.js"></script>
```

Then import the templates into your project.

```javascript
angular.module("myApp", ["ionic", "formlyIonic"])
```

And your're ready!

## Documentation

See [angular-formly](http://docs.angular-formly.com) for formly core documentation.

### Common Properties

NOTE: All of these properties will be under the `templateOptions` property as of angular-formly 3.0.0

---
##### label (string)
>`label` is used to add an html label to each field.

###### Default
>`undefined`

---
##### required (boolean)
>`required` is used to add the required attribute to a form field.

###### Default
>`undefined`

---
##### disabled (boolean)
>`disabled` is used to add the disabled attribute to a form field.

###### Default
>`undefined`

---
##### placeholder (string)
>`placeholder` is used to add placeholder text to some inputs.

###### Default
>`undefined`

---
##### description (string)
>`description` is used to add descriptive text to all inputs.

###### Default
>`undefined`

---
##### addonLeft (object)
>`addonLeft` is used to add an add-on on the left of a field. The object accepts three properties: `text` that sets a simple text, `onClick` will add a `cursor:pointer` and an ng-click to the addon (invoked with the options and scope), and `class` that sets classes to the add-on.

###### Default
>`undefined`

---
##### addonRight (object)
>`addonRight` is used to add an add-on on the right of a field. The object accepts three properties: `text` that sets a simple text, `onClick` will add a `cursor:pointer` and an ng-click to the addon (invoked with the options and scope), and `class` that sets classes to the add-on.

###### Default
>`undefined`

### Fields

### Form Fields

Below is a detailed description of each form fields and its custom properties.

#### Input form field (with Placeholder labels)
>Uses the placeholder attribute to simulate the input"s label. The input uses the `<input>` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

_Example text field_
```json
{
  "type": "input",
  "key": "firstName",
  "templateOptions": {
    "type": "text",
    "placeholder": "<NAME>",
    "icon": "ion-person",
    "iconPlaceholder": true
  }
}
```

---
#### Input form field (with Inline labels)
>Places a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too. Uses the placeholder attribute to simulate the input"s label. The input uses the `<input>` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

_Example text field_
```json
 vm.userFields = [
                {
                    "key": "username",
                    "type": "inline-input",
                    "templateOptions": {
                        "type": "text",
                        "label": "Username"
                    }
                }, {
                    "key": "password",
                    "type": "inline-input",
                    "templateOptions": {
                        "type": "password",
                        "label": "Password"
                    }
                }
            ];
```

---

#### Input form field (with Stacked labels)
>Stacked labels always places the label on top of the input. The input uses the `<input>` element and allows you to specify it"s type via the type property. The "type" property inside of templateOptions can be text, email, password, etc..

_Example text field_
{'fraction_non_alphanumeric': 0.13567587845442042, 'fraction_numerical': 0.0017506564961860698, 'mean_word_length': 3.6881594372801874, 'pattern_counts': {'":': 24, '<': 24, '<?xml version=': 0, '>': 57, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6827248', 'n_tokens_mistral': 2384, 'n_tokens_neox': 2240, 'n_words': 900}