FenjuFu commented on issue #287:
URL:
https://github.com/apache/fineract-backoffice-ui/issues/287#issuecomment-5248543459
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?
--
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]
