How to append values to ion-textarea like jQuery append() Method

Ionic Framework
1

I’m new to ionic, angular. The method below just changes the content of the whole text-area. I want to append values to it like jQuery append() Method.

        <ion-textarea 
          formControlName="message" 
          spellcheck="form" placeholder="write here...." 
          auto-grow 
          rows="2"
          [value]="appendedValue"
        >
        </ion-textarea>
2

you can use [(ngModel)] to have a two way binding.

3

I have and it does work but now I have a warning:

It looks like you're using ngModel on the same form field as formControlName. 
Support for using the ngModel input property and ngModelChange event with 
reactive form directives has been deprecated in Angular v6 and will be removed 
in Angular v7.

For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel

Do you think it is okay to just ignore it? Or is there a solution to it? thanks

4

since you have a formControlName, remove the ngModel

then in your .ts file you can setValue for the form. You can share more code so i can help you

5

So, I have done this but does not work when I call appendValue() to append the ‘String’ :

  ngOnInit(): void {
    this.form = new FormGroup ({

      message: new FormControl(null, {
        updateOn: 'blur',
        validators: [Validators.required, Validators.maxLength(140)]
      }),

      location: new FormControl(null, { validators: [Validators.required] }),
      image: new FormControl(null)
    });

    // get county
    this.country.locateUser();

  }


appendValue(){
  this.form.value.message = this.form.value.message + ('String');
}
6

okay, inside your appendValue() write this

 this.form.controls['message'].setValue('String');

This should work

7

it works but only appends ‘String’ once. When I type content to the text-area and try to append ‘String’ at the end, it gets rid of the content I typed and replace the whole content of the text-area to ‘String’

8

Oh, then make it

this.form.controls['message'].setValue(this.form.value.message + 'String');

9

thank you, I literally just did that. Thank you so much. I learned from you today.

1 Like