InputTextarea adds styling and autoResize functionality to standard textarea element.
import { InputTextareaModule } from 'primeng/inputtextarea';
InputTextarea is applied to an input field with pInputTextarea directive.
<textarea rows="5" cols="30" pInputTextarea [(ngModel)]="value"></textarea>
InputTextarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<textarea rows="5" cols="30" pInputTextarea formControlName="text"></textarea>
</form>
When autoResize is enabled, textarea grows instead of displaying a scrollbar.
<textarea rows="5" cols="30" pInputTextarea [autoResize]="true"></textarea>
InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
<textarea pKeyFilter="int" rows="5" cols="30" pInputTextarea></textarea>
A floating label appears on top of the input field when focused.
<span class="p-float-label">
<textarea id="float-input" rows="5" cols="30" pInputTextarea></textarea>
<label for="float-input">Summary</label>
</span>
Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<textarea rows="5" cols="30" pInputTextarea [(ngModel)]="value" class="ng-invalid ng-dirty"></textarea>
When disabled is present, the element cannot be edited and focused.
<textarea rows="5" cols="30" pInputTextarea [disabled]="true"></textarea>
| Name | Element |
|---|---|
| p-inputtextarea | Textarea element |
InputTextarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
<label for="address1">Address 1</label>
<textarea pInputTextarea id="address1" />
<span id="address2">Address 2</span>
<textarea pInputTextarea aria-labelledby="address2" />
<textarea pInputTextarea aria-label="Address Details"/>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
API defines helper props, events and others for the PrimeNG InputTextarea module.
InputTextarea adds styling and autoResize functionality to standard textarea element.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.