docs(material/chips): Describe how to use chips with forms #27780
Conversation
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
Describe how to use chips with forms Fixes angular#22906
fabi337
force-pushed
the
MatChipsDescribeUseWithForms
branch
from
e37e636
to
05ef86b
Compare
fabi337
changed the title
mmalerba
requested review from
crisbeto
and removed request for
andrewseguin
| @@ -0,0 +1,29 @@ | |||
| <div> | |||
There was a problem hiding this comment.
This example isn't linked in the chips.md so it won't show up in the chips guide, it'll only be in the "Examples" tab. Is that intentional?
| }); | ||
|
|
||
| get fruits() { | ||
| return this.form.get('fruits'); |
There was a problem hiding this comment.
I think we can remove this getter and just use this.form.get('fruits') once at the top of add.
|
|
||
| announcer = inject(LiveAnnouncer); | ||
|
|
||
| constructor() {} |
| return this.form.get('fruits'); | ||
| } | ||
|
|
||
| announcer = inject(LiveAnnouncer); |
|
|
||
| const value = (event.value || '').trim(); | ||
| // Add our fruit | ||
| if ((value || '').trim()) { |
There was a problem hiding this comment.
The (value || '').trim() here isn't necessary since it was done in the const above already.
| // Add our fruit | ||
| if ((value || '').trim()) { | ||
| this.fruits.setValue([...this.fruits.value, {name: value.trim()} as Fruit]); | ||
| this.announcer.announce(`added ${event.value}`); |
There was a problem hiding this comment.
Should "added" be capitalized?
|
|
||
| add(event: MatChipInputEvent): void { | ||
| // Check if input is null | ||
| if (this.fruits == null) return; |
There was a problem hiding this comment.
I don't think that we need the null check here since the fruit control is guaranteed to be defined.
| // Edit existing fruit | ||
| const index = this.fruits?.value.indexOf(fruit); | ||
| if (index >= 0) { | ||
| let updatedFruits = [...this.fruits?.value]; |
There was a problem hiding this comment.
I don't think that this needs to clone the array, it can update the name in place.
|
Closing since there hasn't been any response to the feedback. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
docs(material/chips): Describe how to use chips with forms
Describe how to use chips with forms
Fixes #22906