Angular textarea input not showing value/contents, despite showing up in html

Question

I insert a textarea component into my template like so:

<div class="card-body" *ngIf="isEditing">
    <app-text-area input-id="body" input-value="This is my default input value"></app-text-area>
</div>

The template of app-text-area is like so:

<textarea
    placeholder="This is my placeholder"
    [name]="inputID"
    (input)="onInputChanged($event)"
    ngModel>
    {{ inputValue }}
</textarea>

The subsequent rendered HTML is like so:

<textarea _ngcontent-owj-c62="" placeholder="This is my placeholder" ngmodel="" ng-reflect-model="" ng-reflect-name="body" class="ng-pristine ng-valid ng-touched">
     This is my default input value
</textarea>

However on the actual page, the inputValue text doesn't show up anywhere, the textarea acts as though it is empty, even showing the placeholder text. I can see the value in the html, though when I start typing in the box it replaces it as if it weren't there. The console shows no errors.

If I remove ngModel from the textarea, it fixes it

My app-text-area component ts is:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'app-text-area',
  templateUrl: './text-area.component.html',
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ],
  styleUrls: ['./text-area.component.scss']
})
export class TextAreaComponent implements OnInit {

  @Input("input-id") public inputID: string = "text";
  @Input("input-value") public inputValue: string;

  constructor() { }

  ngOnInit(): void {
  }

  public onInputChanged(event: Event):void {
    let newValue = (event.target as HTMLTextAreaElement).value;
    this.inputValue = newValue;
  }

}

Jordi Riera · Accepted Answer · 2021-11-06 21:28:21Z

2

Hard to help without seeing the component.ts file But a solution would be something in the lines of the following:

HTML template:

<textarea
    
    [name]="inputID"
    (input)="onInputChanged($event)"
    [value]="inputValue">


 </textarea>
<p>{{inputValue}}</p>

And the component.ts:

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-text-area',
  templateUrl: './text-area.component.html',
  styleUrls: ['./text-area.component.css']
})
export class TextAreaComponent implements OnInit {
inputID:number=1;
inputValue:string="This is my placeholder";
  constructor() { }

  ngOnInit(): void {
  }
onInputChanged(event:any){
  this.inputValue=event.target.value;
  
}
}

This would set the initial value as "This is my placeholder" and would update the value on each change in the input displayed inside the p tag

answered Nov 6, 2021 at 21:28

Jordi Riera

1894 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ral Over a year ago

I need the inputValue to be inside the textarea, so that users can edit it. If I do that, it doesn't show up. I've also added my component file to the question.

Jordi Riera Over a year ago

I am not sure I understand what you want to do, since the inputValue will be exactly what the user inputs, or the initial value set as 'placeholder' which can be edited but will be replaced for whatever the user inputs.

Ral · Accepted Answer · 2021-11-07 17:59:57Z

1

I managed to fix this by setting [ngModel]="inputValue" instead of the defaultValue, value, or placing inputValue inside the textarea itself.

answered Nov 7, 2021 at 17:59

Ral

4301 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular textarea input not showing value/contents, despite showing up in html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related