1.0.3 • Published 2 years ago
chatter-box-input v1.0.3
Chatterbox
Chatterbox is a simple material formcontrol component text area that expands and indicates the number of chars entered or remaining.
Inputs
The following Inputs are available
| Input | Type | Defaut | Description |
|---|---|---|---|
| maxLength | NUMBER | INF | maximum amount of chars accepted for input |
| minLength | NUMBER | 0 | minimum amount of chars accepted for input |
| required | BOOLEAN | FALSE | Text entry is required |
| label | STRING | NULL | label for TextArea |
| placeholder | STRING | NULL | placeholder text in TextArea input |
| counterLabel | STRING | NULL | label for Counter |
| type | NUMBER | 1 | 1 is Total Count and -1 is Count Remaining |
| minRows | NUMBER | NULL | Min Rows (Height) for TextArea |
| maxRows | NUMBER | NULL | Max Rows (Height) for TextArea |
| appearence | STRING | NULL | input style |
| readonly | BOOLEAN | false | makes text for disabled state black NOT 50% |
FormControl
formControlName="comments"
countrySelection = this.fb.group({
comments: [null],
})Options
Here is the minimum setup required
<wave-chatter-box
[maxLength]="255"
[minLength]="0"
[label]="'Please enter your message'"
[placeholder]="'I need some assisstance...'"
[counterLabel]="'Total Remaining'"
[type]="-1"
formControlName="chatter"
></wave-chatter-box>Here is the maximum setup
<div [formGroup]="form">
<wave-chatter-box
[maxLength]="100"
[minLength]="10"
[label]="'Please enter your message'"
[placeholder]="'I need some assisstance...'"
[counterLabel]="'Total Characters Remaining'"
[type]="-1"
[minRows]="15"
[maxRows]="15"
appearance="outline"
required="true"
[readOnly]="true"
formControlName="chatter"
></wave-chatter-box>
</div>