docs(date-input): improve example#439
Conversation
DavideMininni-Fincons
requested review from
jeripeierSBB and
kyubisation
as code owners
github-actions
Bot
added
the
pr: peer review required
jeripeierSBB
left a comment
jeripeierSBB
left a comment
There was a problem hiding this comment.
Thank you for the PR! As a key feature of our form components is Angular form integration, we should in the examples show that. As per our idea, you should create three examples (Template Driven Forms, ReactiveForms and Angular Signal Forms) (Message in Teams some weeks ago). With that it would also be interesting to have e.g. min max or other configuration showed. Just contact me, if you have trouble implementing it :) Know Issue: min max is not fully supported with Signal forms.
| @Component({ | ||
| selector: 'sbb-date-input-reactive-example', | ||
| templateUrl: 'date-input-reactive-example.html', | ||
| imports: [ReactiveFormsModule, SbbCardModule, SbbDateInput, SbbFormFieldModule], |
There was a problem hiding this comment.
| imports: [ReactiveFormsModule, SbbCardModule, SbbDateInput, SbbFormFieldModule], | |
| imports: [ReactiveFormsModule, SbbCardModule, SbbDateInputModule, SbbFormFieldModule], |
| @@ -0,0 +1,8 @@ | |||
| <sbb-form-field> | |||
| <label>Date</label> | |||
| <sbb-date-input [valueAsDate]="value()" (input)="onInput($event)"></sbb-date-input> | |||
There was a problem hiding this comment.
We should go via formField
| <sbb-date-input [valueAsDate]="value()" (input)="onInput($event)"></sbb-date-input> | |
| <sbb-date-input [formField]="value()"></sbb-date-input> |
| dateFilter: new FormControl<(d: Date) => boolean>(() => true), | ||
| }); | ||
|
|
||
| onChange(event: Event): void { |
There was a problem hiding this comment.
can we do that via valueChanges or other logic of reactive forms?
| ], | ||
| }) | ||
| export class DateInputVariantsExample { | ||
| protected form = new FormBuilder().group({ |
There was a problem hiding this comment.
Did you chose reactive forms because of problems with signal forms?
There was a problem hiding this comment.
Yes, the min/max worked incorrectly
There was a problem hiding this comment.
does the min max work if you use the reactive validators?
There was a problem hiding this comment.
There is a separate function for dates: https://angular.dev/api/forms/signals/minDate and https://angular.dev/api/forms/signals/maxDate
3 participants
Subtask of #358