mirror of https://github.com/abpframework/abp.git
2 changed files with 43 additions and 0 deletions
@ -0,0 +1,43 @@ |
|||
# Form Input Component |
|||
|
|||
The ABP FormInput Component is a reusable form input component for text type. |
|||
|
|||
It takes `label`, `labelClass` (default form-label), `inputId`,`inputPlaceholder`,`inputReadonly`,`inputClass` (default form-control) and `inputStyle` as input to customize component. Also, it emits `formBlur` and `formFocus` events when component gain or lose focus. |
|||
|
|||
# Usage |
|||
|
|||
ABP FormInput component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, you don't need to import it again. If not, first import it as shown below: |
|||
|
|||
```ts |
|||
// my-feature.module.ts |
|||
|
|||
import { ThemeSharedModule } from "@abp/ng.theme.shared"; |
|||
import { FomrInputDemoComponent } from "./FomrInputDemoComponent.component"; |
|||
|
|||
@NgModule({ |
|||
imports: [ |
|||
ThemeSharedModule, |
|||
// ... |
|||
], |
|||
declarations: [FomrInputDemoComponent], |
|||
// ... |
|||
}) |
|||
export class MyFeatureModule {} |
|||
``` |
|||
|
|||
Then, the `abp-form-input` component can be used. See the example below: |
|||
|
|||
```html |
|||
<div class="row"> |
|||
<div class="col-4"> |
|||
<abp-form-input |
|||
label="AbpAccount::UserNameOrEmailAddress" |
|||
inputId="login-input-user-name-or-email-address" |
|||
></abp-form-input> |
|||
</div> |
|||
</div> |
|||
``` |
|||
|
|||
See the form input result below: |
|||
|
|||
 |
|||
|
After Width: | Height: | Size: 5.8 KiB |
Loading…
Reference in new issue