@talenra/components documentation
  1. Components
  2. InputComponent

File

input/src/input/input.component.ts

Description

<input|textarea talenra-input> provides consistent styling and behaviour for form inputs and textareas. It is typically used as child of <talenra-form-field>.

Reactive form

Example :
// Component class
sampleForm: FormGroup = new FormGroup({
  lastName: new FormControl(''),
  comment: new FormControl(''),
});
Example :
<!-- Component template -->
<form [formGroup]="sampleForm">
  <talenra-form-field label="Lastname">
    <input talenra-input formControlName="lastName" type="text" />
  </talenra-form-field>
  <talenra-form-field label="Comment">
    <textarea talenra-input formControlName="comment"></textarea>
  </talenra-form-field>
</form>

Template driven form

Example :
// Import `FormsModule` in the declaring module
import { FormsModule } from '@angular/forms';
@NgModule({
 // ...
 imports: [FormsModule],
})
Example :
// Component class
lastName = '';
comment = '';
Example :
<!-- Component template -->
<form #templateDrivenForm="ngForm">
  <talenra-form-field label="Lastname">
    <input talenra-input name="lastName" [(ngModel)]="lastName" type="text" />
  </talenra-form-field>
  <talenra-form-field label="Comment">
    <textarea talenra-input name="comment" [(ngModel)]="comment"></textarea>
  </talenra-form-field>
</form>

Formless

Example :
// Component class
lastName = '';
comment = '';
Example :
<!-- Component template -->

<talenra-form-field label="Lastname">
  <input talenra-input [(ngModel)]="lastName" />
</talenra-form-field>
<talenra-form-field label="Comment">
  <textarea talenra-input [(ngModel)]="comment"></textarea>
</talenra-form-field>

Import

Example :
import { InputComponent } from '@talenra/components/input';

../../../#/input

See FormFieldComponent

Extends

FormFieldControlBaseComponent

Implements

OnInit ControlValueAccessor FormFieldControl

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
providers InputComponent
selector input[talenra-input], textarea[talenra-input]
styleUrls ./input.component.scss

Index

Properties
Methods
Inputs
Accessors

Inputs

disabled
Type : boolean

Determines whether the control is disabled/enabled.
type
Type : TInputType
Default value : InputType.Text

The value provided to the input elements type attribute. Supports a subset of the native input element's types.

Example :
<input talenra-input type="email" />

See InputComponent See MDN: Input type

Methods

Public focus
focus()

Sets the focus to the input.

Returns : void

Properties

Public hasScroll
Type : unknown
Default value : signal<boolean>(false)

Determines whether the input has vertical scroll offset (textarea only)

Accessors

disabled
getdisabled()

Determines whether the control is disabled/enabled.

Returns : boolean
setdisabled(value: boolean)

Set the control's disabled state

Parameters :
Name Type Optional
value boolean No
Returns : void

results matching ""

    No results matching ""