angular / angular/components

docs-bug(MatInput): How to nest / wrap material form controls

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

説明

#### Documentation Feedback

I find myself getting stuck on this again and again, and I've been using angular and material since it's inception, so by now it should have stuck up there in the old noggin, but alas.

Today we have a basic tutorial on how to do a completely custom form field
https://material.angular.io/guide/creating-a-custom-form-field-control

but there is no tutorials examples of how to take an existing matInput mat-select or other form controls and wrap them into a component.
Usually we need to do this to DRY things up and not have to have the same error messages, options or reoccurring fields multiple times.

## These are some tutorials / examples I would like to see

**Custom component to wrap sub field names, validation and errors**
I have an Address FormGroup which contains
street, zipcode, city
and a couple of mat-form-fields with labels, inputs, errors
I now want to wrap this into a ``

**Custom `mat-select` with static list of values and validation**
I have a Language select that is reused in multiple places
I now want to use it ``

**Custom `input with some kind of dialog picker`**
A User picker, should display the user name when done, and an icon to the right much like a date picker.
but then in the dialog we have some custom logic to list all users, and the value that comes out of the picker should be the database id for the user.
``

## The struggles
Since matInput already implements ControlValueAccessor it must be possible to just provide / delegate functionality down to that child, but how?

I have multiple implementations of the above, but all of them feel over complicated, or the dirty state isn't working because of something.

We need best practices for creating wrapped form controls and form groups :)

Please let me know if you need more context or examples, I have plenty

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

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

調査の方向性

リンクされた Angular Material のカスタムフォームフィールドコントロール作成ガイドから始め、要求されているラップされた matInput、mat-select、form-group、picker の例と比較します。チュートリアルを追加する前に、スコープと推奨パターンを定義します。ドキュメントで、完全な例、バリデーション、フォーム状態の動作を含むラップされたコントロールとグループを説明できれば完了です。

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

評価

技術スタック
angular, typescript
領域
documentation
issue の種類
ドキュメント
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
28/100

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

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