@ng-dynamic-forms/ui-bootstrap
Version:
Bootstrap UI package for NG Dynamic Forms
56 lines (42 loc) • 2.3 kB
Markdown
# NG Dynamic Forms Bootstrap UI
## Installation
```
npm i @ng-dynamic-forms/ui-bootstrap -S
```
## Import
```ts
@NgModule({
imports: [DynamicFormsBootstrapUIModule]
})
export class AppModule {}
```
## Usage
with **`DynamicBootstrapFormComponent`**:
```ts
<form [formGroup]="myFormGroup">
<dynamic-bootstrap-form [group]="myFormGroup"
[model]="myFormModel"></dynamic-bootstrap-form>
</form>
```
with **`DynamicBootstrapFormControlComponent`**:
```ts
<form [formGroup]="myFormGroup">
<dynamic-bootstrap-form-control *ngFor="let controlModel of myFormModel"
[group]="myFormGroup"
[model]="controlModel"></dynamic-bootstrap-form-control>
</form>
```
## Form Controls
| Control | Model | Required Property |
|:------------------------------------------------------------------------: |:---------------------------: |:-----------------: |
| **[Checkbox](http://getbootstrap.com/css/#checkboxes-and-radios)** | `DynamicCheckboxModel` | – |
| **[Checkbox Group](http://getbootstrap.com/css/#checkboxes-and-radios)** | `DynamicCheckboxGroupModel` | – |
| **[Datepicker](https://valor-software.com/ngx-bootstrap/#/datepicker)** | `DynamicDatePickerModel` | – |
| **[Input](http://getbootstrap.com/css/#inputs)** | `DynamicInputModel` | – |
| **[Radio Group](http://getbootstrap.com/css/#checkboxes-and-radios)** | `DynamicRadioGroupModel` | – |
| **[Select](http://getbootstrap.com/css/#selects)** | `DynamicSelectModel` | – |
| **[TextArea](http://getbootstrap.com/css/#textarea)** | `DynamicTextAreaModel` | – |
| **[Timepicker](https://valor-software.com/ngx-bootstrap/#/timepicker)** | `DynamicTimePickerModel` | – |
## Resources
* [**API Documentation**](http://ng2-dynamic-forms.udos86.de/docs/ui-bootstrap/)
* [**Live Sample**](http://ng2-dynamic-forms.udos86.de/sample/index.aot.html#bootstrap-sample-form)