Блог

Главная - Вопросы по программированию - Угловой ввод текстовой области не отображает значение/содержимое, несмотря на то, что отображается в html

Угловой ввод текстовой области не отображает значение/содержимое, несмотря на то, что отображается в html

#html #angular

Вопрос:

Я вставляю компонент textarea в свой шаблон следующим образом:

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

Шаблон app-text-area выглядит так:

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

Последующий визуализированный HTML выглядит так:

 <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>

Однако на реальной странице inputValue текст нигде не отображается, область текста действует так, как будто она пуста, даже показывая текст-заполнитель. Я вижу значение в html, хотя, когда я начинаю вводить текст в поле, оно заменяет его, как будто его там не было. Консоль не показывает ошибок.

Если я удалю ngModel из текстовой области, это исправит ее

Мой app-text-area компонент ts-это:

 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;
  }

}

Ответ №1:

Трудно помочь, не видя файл component.ts, но решением было бы что-то вроде следующего:

HTML шаблон:

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


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

И компонент.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;
  
}
}

Это установило бы начальное значение как «Это мой заполнитель» и обновляло бы значение при каждом изменении входных данных, отображаемых внутри тега p

Комментарии:

1. Мне нужно inputValue , чтобы он был внутри textarea , чтобы пользователи могли его редактировать. Если я это сделаю, он не появится. Я также добавил свой файл компонента к вопросу.

2. Я не уверен, что понимаю, что вы хотите сделать, так как входное значение будет точно таким, какое вводит пользователь, или начальное значение, заданное как «заполнитель», которое можно редактировать, но будет заменено для любых пользовательских вводов.

Ответ №2:

Мне удалось исправить это, установив [ngModel]="inputValue" вместо defaultValue , value , или поместив inputValue внутри самой текстовой области.

Метки: , ,