Ionic 3 如何使用 textarea ngModel 和默认值？答案

【问题标题】：Ionic 3 how to use textarea ngModel and default value?Ionic 3 如何使用 textarea ngModel 和默认值？
【发布时间】：2017-11-16 13:22:36
【问题描述】：

我是 ionic 新手，对 textarea 有疑问。这是我的代码：

<textarea  [(ngModel)]="userData.aboutme" name="" id="" cols="30" rows="20"  
    value="{{ about_me}}" style="width:100%; padding: 10px; margin-top: 3px;" > 
</textarea>

问题是该值未显示在 textarea 中。只有当我删除 [(ngModel)] 时才会显示。我需要帮助，非常感谢

【问题讨论】：

标签： angular typescript ionic-framework ionic3

【解决方案1】：

您需要使用ion-textarea。

注意：这只是一个例子，你可以随意调整。

工作stackblitz

html

 <ion-item>
  <ion-textarea placeholder="Tap here" 
      [(ngModel)]="note" name="note" autocomplete="on" autocorrect="on"></ion-textarea>
 </ion-item>

.ts

  note: string = "My Default Text";
  constructor(public navCtrl: NavController) {

  }

Offical doc about ion-textarea

【讨论】：

非常感谢。您的 anwser 帮助我解决问题。
您也可以在中使用 placeholder="about me" 作为默认文本。在这种情况下，当用户没有将内容放入其中时，文本区域保持为空，因此所需的验证器也可以工作。

【解决方案2】：

.html 上的 ion-textarea

 <ion-item>
   <ion-label floating>Content</ion-label>
   <ion-textarea #myInput id="myInput" rows="1" maxLength="500" 
  (keyup)="adjust()" [(ngModel)]="text.content"></ion-textarea>
 </ion-item>

On.ts 文件，

  import { Directive, HostListener, ElementRef } from '@angular/core';


 @IonicPage()
 @Component({
   selector: 'page-post-text',
   templateUrl: 'post-text.html',
 })

 @Directive({
         selector: 'ion-textarea[autosize]' // Attribute selector,
           })
  export class PostTextPage {

  @HostListener('document:keydown.enter', ['$event']) 
  onKeydownHandler(evt: KeyboardEvent) {
  this.adjust()
  }



   Text = {} as Text;

   constructor(public element:ElementRef) {}

   ngAfterViewInit(){
   this.adjust()
   }

  adjust():void {
  let textArea = 
  this.element.nativeElement.getElementsByTagName('textarea')[0];
  textArea.style.overflow = 'hidden';
  textArea.style.height = 'auto';
  textArea.style.height = (textArea.scrollHeight + 32) + "px";
  }
 }

你很高兴！

【讨论】：