angular / angular/components

Add minimal example for cdkTextareaAutosize

オープン
#15,813 コメント 6 件 リアクション 7 件 担当者 0 名 GitHub で見る
area: material/input docs feature help wanted P5
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### What is the expected behavior?
The [docs](https://material.angular.io/cdk/text-field/overview) for `Automatically resizing a ` and the [stackblitz example](https://stackblitz.com/angular/aqdvjmmqomd) should only mention what's actually needed to make it work.

#### What is the current behavior?
They mention a whole lot of stuff, **_removing which_** still lets things function! So its not clear why its been put there and its misleading without an explanation.

Extra stuff in the HTML template:
```
#autosize="cdkTextareaAutosize"
```

Extra stuff in the component:
```
import {CdkTextareaAutosize} from '@angular/cdk/text-field';
import {..., NgZone, ViewChild} from '@angular/core';
import {take} from 'rxjs/operators';
...
constructor(private ngZone: NgZone) {}
@ViewChild('autosize') autosize: CdkTextareaAutosize;
triggerResize() {
// Wait for changes to be applied, then trigger textarea resize.
this.ngZone.onStable.pipe(take(1))
.subscribe(() => this.autosize.resizeToFitContent(true));
}
}
```
That's 4 extra imports, a `viewchild` binding and when I put a `console.log` statement inside either `triggerResize` or the subscribed function ... nothing happens ... meaning the code never runs! So what is the point of all that extra stuff? Maybe its actually useful for something else that the docs failed to mention?

#### What are the steps to reproduce?
This [stackblitz](https://stackblitz.com/edit/mat-list-height?embed=1&file=src/app/app.component.html) shows that nothing other than `cdkTextareaAutosize cdkAutosizeMinRows cdkAutosizeMaxRows` is needed to `Automatically resizing a <textarea>`

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular v7, Material v7 are the versions I used.

#### Is there anything else we should know?
Keep up the good work 👍

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた Angular Material のテキストフィールドのドキュメントとその StackBlitz の例から始め、Issue にリンクされた最小再現と比較してください。自動サイズ変更に必要なディレクティブとセットアップを確認してください。ドキュメントと例に必要なコードだけが示され、オプションの動作について説明されていれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
documentation
issue の種類
ドキュメント
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。