typescript - Mă întreb cum să folosesc textarea pentru model în Angular

Vreau să folosesc modelul și să trimit la server.

De exemplu, trimiterea de comentarii.

comentariu.model.ts

export interface Comment {
  article_no: number;
  username: string;
  nickname: string;
  creatat: Date;
  content: string;
}

comentariu.serviciu.ts

import { Injectable } from '@angular/core';
import { ApiService } from '.';
import { Observable } from 'rxjs/Observable';
import { Comment } from '..';

@Injectable()
export class CommentService {

  constructor(
    private apiService: ApiService
  ) { }

  public writeComment(comment: Comment) {
    return this.apiService.post('/api/comment/', comment);
  }
}

comment.component.html (Folosesc Material UI)

<form class="comment-form">
  <mat-form-field class="example-full-width">
    <textarea matInput matTextareaAutosize [formControl]="content" placeholder="comment"></textarea>
  </mat-form-field>
  <button class="ui primary button" (click)="addComment()"> Add </button>
  <button class="comment-btn">Save</button>
</form>

Am folosit [formControl], dar aș vrea să știu dacă există o modalitate mai bună.

comment.component.ts

...
export class CommentComponent implements DoCheck {
  content = new FormControl();
}
...
addComment() {
    this.commentService.writeComment(this.content.value);
}

Vreau să pun 'this.content.value' în 'content în comment.model.ts' și să îl trimit la server prin comment.service.ts.

Dacă ai o modalitate mai bună, aș aprecia sfatul tău.

Mulțumesc.

Răspuns #1

Deoarece este un formular, un formControl este suficient pentru utilizator. Dacă vrei, poți folosi și [(ngModel)]. Schimbă-ți șablonul astfel:

<form class="comment-form">
  <mat-form-field class="example-full-width">
    <textarea matInput matTextareaAutosize [(ngModel)]="content" placeholder="comment">
    </textarea>
  </mat-form-field>
  <button class="ui primary button" (click)="addComment()"> Add </button>
  <button class="comment-btn">Save</button>
</form>

și TypeScript va arăta așa:

...
export class CommentComponent implements DoCheck {
  content: string;
}
...
addComment() {
    let comment: Comment = { content: this.content,
                             // You can initialize/set other properties as well
                           };
    this.commentService.writeComment(comment);
}