0

My options dropdown has a boolean value in this Formly field. Whenever the value is false, this causes the placeholder and the options label to be overlayed over each other.

I don't have this issues with any of my other formly items, just ones with the value of false. Is there a solution for this?

Edit: I may be having trouble uploading photos, but I found another example of this error here: https://stackblitz.com/edit/angular-formly-demo The only difference is I'm not using Material

formly-true-option formly-false-option

{
                className: 'dropdown',
                key: 'emergencyActionPlan',
                id: 'emergencyActionPlan',
                type: 'dropdown',
                templateOptions: {
                  placeholder: 'Emergency Action Plan',
                  required: true,
                  options: [
                    { value: true, label: 'Yes' },
                    { value: false, label: 'No' }
                  ],
                  labelProp: 'label',
                  valueProp: 'value'
                }
}
4
  • That stackblitz you've referenced replaces the formly control with their own custom input, I'm not sure you can use it as a comparison. Can you set up a stackblitz of your own with it? When I remove their custom control it works just fine. See: stackblitz.com/edit/… all I did was remove types: [ {name: 'input', component: FormlyFieldInput} ], from the module. Jan 13, 2022 at 4:06
  • It was just meant to be a visible example of the bug, not a programmatic representation. I've also found that if an options value is set to 0 (zero) the same issue happens. But not if it's set to undefined. Jan 13, 2022 at 14:32
  • Team may have figured it out. It's still being worked on but apparently the textarea element has a class set to a ternary operator that checks if the value is not. ``` class="{{ !formControl.value ? 'p-filled' : '' }}"``` which would cause falsies and 0 to return null class Jan 13, 2022 at 17:03
  • What I was trying to get at is it's not the framework, it's something custom. If you can paste the code that would help. For your specific use case you can try class="{{ !formControl.value && formContro.value !== false ? 'p-filled' : '' }}" Jan 13, 2022 at 20:01

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.