Aman-Mittal commented on issue #287:
URL:
https://github.com/apache/fineract-backoffice-ui/issues/287#issuecomment-5248789498
> I'd like to take the one-form proof slice. I checked current `main`, and
propose this API/scope before writing the implementation:
>
> ```html
> <app-form-field labelKey="PAYMENT_TYPES.NAME" [required]="true">
> <ion-input name="name" [(ngModel)]="paymentType().name"
required></ion-input>
> </app-form-field>
> ```
>
> - `app-form-field` is standalone and uses signal inputs (`labelKey`,
`required`, optional `hintKey`). It owns the `ion-item fill="outline"` shell
but content-projects the Ionic control, so `name`, `[(ngModel)]`, `type`, and
other control-specific inputs stay at the call site.
> - A typed signal content query applies the translated value to the
projected control's native `label` and `labelPlacement="stacked"` properties.
That removes the sibling `ion-label` and makes `[attr.aria-label]` unnecessary
without moving form ownership into the wrapper.
> - The wrapper exposes projected hint/error slots but does not introduce
validation behavior in this PR.
> - For the proof form, I suggest `payment-type-form.component.ts`: its
three inputs cover required/optional/number cases, it has no date triad to
muddy the first API, and its existing unit spec can remain untouched.
> - Tests: a focused wrapper spec for translated label, required marker,
preserved projected `name`, and accessible name; plus `getByLabel('Name')` in
the existing mocked `functional-coverage.spec.ts` payment-type flow.
> - `_common.scss` already owns base `.form-container` padding/margin. I
would add only a shared narrow-width modifier for the proof (`600px`) and
remove the local duplicate; other width variants can move incrementally rather
than adding unused utilities now.
> - I will update `STYLE.md` from the Ionic 7 sibling-label example to this
wrapper/native-label pattern in the same PR.
>
> One design question: I prefer proving a single `app-form-field` first and
adding select/date-specific components after its projection API is accepted.
Would you like that smaller first PR, or do you want `app-select-field` and
`app-date-field` included from the start?
Start by smaller piece first and make sure to share video/screen shot of the
component
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
