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>