Angular中textarea使用ngModel时传入的inputValue值不显示问题

问题本质是Angular中ngModel的优先级高于textarea标签内的插值内容：

• 你在textarea标签上声明了ngModel但未给它绑定初始值，Angular表单模块会默认将该控件的初始值设为空
• ngModel管控表单控件的显示值时，会直接覆盖你写在标签内部的{{ inputValue }}插值内容，所以哪怕最终渲染的HTML源码里能看到默认值，页面实际展示也会以ngModel管控的空值为准，显示空白或占位符
• 你手动写的onInputChanged方法修改inputValue的逻辑，和ngModel维护的表单控件状态完全不同步，也会导致状态异常

按照以下步骤修改即可：

1. 先修改组件的TypeScript代码，补充双向绑定所需的输出事件，和ngModel同步逻辑：

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;
  // 新增输出事件，支持input-value的双向绑定
  @Output("input-valueChange") public inputValueChange = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  public onValueChanged(newValue: string):void {
    this.inputValue = newValue;
    this.inputValueChange.emit(newValue);
  }

}

2. 修改组件模板，把inputValue绑定到ngModel，删除标签内的插值内容，用ngModelChange监听值变化：

<textarea
    placeholder="This is my placeholder"
    [name]="inputID"
    [ngModel]="inputValue"
    (ngModelChange)="onValueChanged($event)"
>
</textarea>

3. 如果父组件需要双向绑定获取更新后的内容，也可以修改父组件调用写法：

<div class="card-body" *ngIf="isEditing">
    <app-text-area input-id="body" [(input-value)]="yourParentVariable"></app-text-area>
</div>

内容的提问来源于stack exchange，提问作者Ral