-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(material/chips): describe how to use chips in forms
Added a description and examples in the docs of how to use chips in both reactive and template-driven forms. Fixes #22906
- Loading branch information
1 parent
e6535b7
commit ff72b61
Showing
8 changed files
with
164 additions
and
0 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
src/components-examples/material/chips/chips-reactive-form/chips-reactive-form-example.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.example-form-field { | ||
width: 100%; | ||
} |
21 changes: 21 additions & 0 deletions
21
src/components-examples/material/chips/chips-reactive-form/chips-reactive-form-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<section> | ||
<h4>Chips inside of a Reactive form</h4> | ||
<mat-form-field class="example-form-field"> | ||
<mat-label>Video keywords</mat-label> | ||
<mat-chip-grid #reactiveChipGrid aria-label="Enter reactive form keywords" [formControl]="formControl"> | ||
@for (keyword of reactiveKeywords(); track keyword) { | ||
<mat-chip-row (removed)="removeReactiveKeyword(keyword)"> | ||
{{keyword}} | ||
<button matChipRemove aria-label="'remove reactive form' + keyword"> | ||
<mat-icon>cancel</mat-icon> | ||
</button> | ||
</mat-chip-row> | ||
} | ||
</mat-chip-grid> | ||
<input | ||
placeholder="New keyword..." | ||
[matChipInputFor]="reactiveChipGrid" | ||
(matChipInputTokenEnd)="addReactiveKeyword($event)" | ||
/> | ||
</mat-form-field> | ||
</section> |
57 changes: 57 additions & 0 deletions
57
src/components-examples/material/chips/chips-reactive-form/chips-reactive-form-example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import {LiveAnnouncer} from '@angular/cdk/a11y'; | ||
import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; | ||
import {FormControl, ReactiveFormsModule} from '@angular/forms'; | ||
import {MatButtonModule} from '@angular/material/button'; | ||
import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips'; | ||
import {MatFormFieldModule} from '@angular/material/form-field'; | ||
import {MatIconModule} from '@angular/material/icon'; | ||
|
||
/** | ||
* @title Chips in reactive forms | ||
*/ | ||
@Component({ | ||
selector: 'chips-reactive-form-example', | ||
templateUrl: 'chips-reactive-form-example.html', | ||
styleUrl: 'chips-reactive-form-example.css', | ||
standalone: true, | ||
imports: [ | ||
MatButtonModule, | ||
MatFormFieldModule, | ||
MatChipsModule, | ||
ReactiveFormsModule, | ||
MatIconModule, | ||
], | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
}) | ||
export class ChipsReactiveFormExample { | ||
readonly reactiveKeywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']); | ||
readonly formControl = new FormControl(['angular']); | ||
|
||
announcer = inject(LiveAnnouncer); | ||
|
||
removeReactiveKeyword(keyword: string) { | ||
this.reactiveKeywords.update(keywords => { | ||
const index = keywords.indexOf(keyword); | ||
if (index < 0) { | ||
return keywords; | ||
} | ||
|
||
keywords.splice(index, 1); | ||
this.announcer.announce(`removed ${keyword} from reactive form`); | ||
return [...keywords]; | ||
}); | ||
} | ||
|
||
addReactiveKeyword(event: MatChipInputEvent): void { | ||
const value = (event.value || '').trim(); | ||
|
||
// Add our keyword | ||
if (value) { | ||
this.reactiveKeywords.update(keywords => [...keywords, value]); | ||
this.announcer.announce(`added ${value} to reactive form`); | ||
} | ||
|
||
// Clear the input value | ||
event.chipInput!.clear(); | ||
} | ||
} |
3 changes: 3 additions & 0 deletions
3
src/components-examples/material/chips/chips-template-form/chips-template-form-example.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.example-form-field { | ||
width: 100%; | ||
} |
21 changes: 21 additions & 0 deletions
21
src/components-examples/material/chips/chips-template-form/chips-template-form-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<section> | ||
<h4>Chips inside of a Template-driven form</h4> | ||
<mat-form-field class="example-form-field"> | ||
<mat-label>Video keywords</mat-label> | ||
<mat-chip-grid #templateChipGrid aria-label="Enter template form keywords" [(ngModel)]="templateKeywords"> | ||
@for (keyword of templateKeywords(); track keyword) { | ||
<mat-chip-row (removed)="removeTemplateKeyword(keyword)"> | ||
{{keyword}} | ||
<button matChipRemove aria-label="'remove template form' + keyword"> | ||
<mat-icon>cancel</mat-icon> | ||
</button> | ||
</mat-chip-row> | ||
} | ||
</mat-chip-grid> | ||
<input | ||
placeholder="New keyword..." | ||
[matChipInputFor]="templateChipGrid" | ||
(matChipInputTokenEnd)="addTemplateKeyword($event)" | ||
/> | ||
</mat-form-field> | ||
</section> |
50 changes: 50 additions & 0 deletions
50
src/components-examples/material/chips/chips-template-form/chips-template-form-example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import {LiveAnnouncer} from '@angular/cdk/a11y'; | ||
import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; | ||
import {FormsModule} from '@angular/forms'; | ||
import {MatButtonModule} from '@angular/material/button'; | ||
import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips'; | ||
import {MatFormFieldModule} from '@angular/material/form-field'; | ||
import {MatIconModule} from '@angular/material/icon'; | ||
|
||
/** | ||
* @title Chips in template-driven forms | ||
*/ | ||
@Component({ | ||
selector: 'chips-template-form-example', | ||
templateUrl: 'chips-template-form-example.html', | ||
styleUrl: 'chips-template-form-example.css', | ||
standalone: true, | ||
imports: [MatButtonModule, MatFormFieldModule, MatChipsModule, FormsModule, MatIconModule], | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
}) | ||
export class ChipsTemplateFormExample { | ||
readonly templateKeywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']); | ||
|
||
announcer = inject(LiveAnnouncer); | ||
|
||
removeTemplateKeyword(keyword: string) { | ||
this.templateKeywords.update(keywords => { | ||
const index = keywords.indexOf(keyword); | ||
if (index < 0) { | ||
return keywords; | ||
} | ||
|
||
keywords.splice(index, 1); | ||
this.announcer.announce(`removed ${keyword} from template form`); | ||
return [...keywords]; | ||
}); | ||
} | ||
|
||
addTemplateKeyword(event: MatChipInputEvent): void { | ||
const value = (event.value || '').trim(); | ||
|
||
// Add our keyword | ||
if (value) { | ||
this.templateKeywords.update(keywords => [...keywords, value]); | ||
this.announcer.announce(`added ${value} to template form`); | ||
} | ||
|
||
// Clear the input value | ||
event.chipInput!.clear(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters