I have text area box ,I need to check the data when we enter the text in the text area.I written change method but that is not working here is the code.
<textarea (change)="textAreaEmpty(textValue)" #textValue></textarea>
component
textAreaEmpty(text:string){
if(text.length > 0)
console.log(text);
}
I also need to check how many rows user entered in the text area.i dint find any solution in anuglar2 ,I am able to get the data with jquery or javascript,but i don't want to use that. i want to use it in angular 2,Can any body help me?
I am able to get the data with jquery or javascript,but i don't want to use that. i want to use it in angular 2,Can any body help me?
Use [ngModel] if you want to do it more "Angularish"...
<textarea [(ngModel)]="textValue" (ngModelChange)="textAreaEmpty()"></textarea>
TS:
textValue: string = '';
textAreaEmpty(){
if (this.textValue != '') {
console.log(this.textValue);
}
}
textValue is not a value in this case. It's the whole input element so if you'd like to check if it has it's own value, you need to change your html as follows:
<textarea (change)="textAreaEmpty(textValue.value)" #textValue></textarea>
Validation for new-lines, white-spaces or null
if(value.trim().length === 0)
console.log('No input found')
Run code snippet to test
insert new-lines and white-spaces but you'll not get any output on focus-out from input field
document.getElementsByName("text")[0].addEventListener('change', onChange);
function onChange(){
if (this.value.trim().length != 0) {
console.log('Here is your output: ')
console.log(this.value)
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<textarea name="text" rows="3" class="form-control" placeholder="Write and check"></textarea>