angular - Ionic 3 cum să folosești textarea ngModel și valoarea implicită?
Sunt nou în Ionic și am o problemă cu textarea. Acesta este codul meu:
<textarea [(ngModel)]="userData.aboutme" name="" id="" cols="30" rows="20"
value="{{ about_me}}" style="width:100%; padding: 10px; margin-top: 3px;" >
</textarea>
Problema este că valoarea nu se afișează în interiorul câmpului textarea. Se afișează doar dacă elimin [(ngModel)]. Am nevoie de ajutor pentru asta, mulțumesc mult
Răspuns #1
Trebuie să folosești ion-textarea.
Notă: Acesta este doar un exemplu. Ajustați-l după cum doriți.
Funcționând 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) {
}
Document oficial despre ion-textarea
Răspunsul #2
pe ion-textarea pe .html
<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>
Fișier 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";
}
}
Și ești gata de plecare!
