-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/designators component #103
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Kudos on getting this ControlValueAccessor
to work (and so quickly)! I will make sure to steal parts of this for my LabelSelectComponent
.
As far as I can see, the component works fine, so none of my comments here prevent merger.
<button class="btn btn-primary" type="submit" | ||
[disabled]="disabled" | ||
(blur)="blur$.next()"> | ||
<lc-icon [icon]="actionIcons.add" aria-label="add" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<lc-icon [icon]="actionIcons.add" aria-label="add" /> | |
<lc-icon [icon]="actionIcons.add" aria-label="add designator" /> |
(I'm not sure how specific these aria-labels
are expected to be.)
} | ||
|
||
registerOnChange(fn: (_: any) => void): void { | ||
this.designators$.subscribe(fn); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These subscriptions are not closed at the moment. For bonus points, please make sure they are canceled upon component destruction.
onAddFormSubmit() { | ||
if (this.addForm.valid) { | ||
const designator = this.addForm.controls.designator.value; | ||
this.designators$.next(this.designators$.value.concat([designator])); | ||
this.addForm.reset({ designator: '' }); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onAddFormSubmit() { | |
if (this.addForm.valid) { | |
const designator = this.addForm.controls.designator.value; | |
this.designators$.next(this.designators$.value.concat([designator])); | |
this.addForm.reset({ designator: '' }); | |
} | |
} | |
onAddFormSubmit(): void { | |
if (this.addForm.invalid) { | |
return; | |
} | |
const designator = this.addForm.controls.designator.value; | |
this.designators$.next(this.designators$.value.concat([designator])); | |
this.addForm.reset({ designator: '' }); | |
} |
} | ||
|
||
removeDesignator(index: number) { | ||
const spliced = _.clone(this.designators$.value) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is deep cloning necessary here? The control seems to continue working if I remove it.
this.designators$.subscribe(fn); | ||
} | ||
|
||
registerOnTouched(fn: (_: any) => void): void { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of using any
here, you can use unknown
, which does not give a type warning.
This adds a
DesignatorsControlComponent
, which contains the form widget for the designators of people, places, and things.Screenshot:
![screenshot showing a list of names with a "remove" button for each, and an input field to add a new name](https://private-user-images.githubusercontent.com/43678097/354557904-52db3e93-9555-4ebb-9c80-ad843fca874a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTM2ODUsIm5iZiI6MTczOTU5MzM4NSwicGF0aCI6Ii80MzY3ODA5Ny8zNTQ1NTc5MDQtNTJkYjNlOTMtOTU1NS00ZWJiLTljODAtYWQ4NDNmY2E4NzRhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE1VDA0MjMwNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUxMWJlYmU2MTMyNDY5YzQ2NmFiYTE2ODdhYWI3ZTc5ZjQxYzM1ZjA2NWUxZWZiZDgxNmFjZThiYTAwOTcyYmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.GO6LTetzWTLBCz2-sfzSv6EmJSg1pQcEX_nm_csBzSg)