When using a lu-form-field inside another lu-form-field with each having its own control (like in a radio setup for instance), because lu-form-field gets its children NgControl references using a @ContentChildren(NgControl, { descendants: true }), it'll get controls that are under its scope but also the one under all the possible lu-form-field children.
Because we want to allow controls to be nested in possible wrappers or even just a div, we can't disable descendant in the query.
Steps to reproduce
Here is an example template that reproduces this bug:
<form [formGroup]="form">
<lu-form-field label="Level 1">
<lu-radio-group-input formControlName="foo">
<lu-radio [value]="0">
Pas Coucou
</lu-radio>
<lu-radio [value]="1">
Coucou
@if(form.value.foo === 1) {
<lu-form-field label="Level 2">
<!-- This one is a required control -->
<lu-text-input formControlName="bar"></lu-text-input>
</lu-form-field>
}
</lu-radio>
</lu-radio-group-input>
</lu-form-field>
</form>
Bug can also be reproduced in chore/repro-3233 branch, using the Documentation/Forms/Fields/Form Field/Nested Controls story that uses the above template.
Selecting Coucou radio will mark Level 1 label as required while it shouldn't, because its control isn't required, only the inner child control is.
Possible solutions
What we want is a way for lu-form-field to know it shouldn't consider a given control as its own control because it's already handled, the two solutions I can see so far are:
Add a meta value on control to mark it as "handled" by a given control, which should be fine but is, imo, prone to race conditions.
When getting a control from the query, check its parents recursively until we find a lu-form-field, then compare it with current field, if it's the same, we can consider it as this field's control, else no.
Description
When using a
lu-form-fieldinside anotherlu-form-fieldwith each having its own control (like in a radio setup for instance), becauselu-form-fieldgets its childrenNgControlreferences using a@ContentChildren(NgControl, { descendants: true }), it'll get controls that are under its scope but also the one under all the possiblelu-form-fieldchildren.Because we want to allow controls to be nested in possible wrappers or even just a div, we can't disable
descendantin the query.Steps to reproduce
Here is an example template that reproduces this bug:
Bug can also be reproduced in
chore/repro-3233branch, using theDocumentation/Forms/Fields/Form Field/Nested Controlsstory that uses the above template.Selecting
Coucouradio will markLevel 1label as required while it shouldn't, because its control isn't required, only the inner child control is.Possible solutions
What we want is a way for
lu-form-fieldto know it shouldn't consider a given control as its own control because it's already handled, the two solutions I can see so far are:lu-form-field, then compare it with current field, if it's the same, we can consider it as this field's control, else no.