Questions tagged [ngx-formly]
ngx-formly is an Angular module which automatically generate Angular reactive form from Formly as well as JSON schema.
115
questions
0
votes
0
answers
13
views
Angular Formly repeat section - Async model. Not working
I'm trying to create a custom repeat type for formly (for file uploads) that takes in a certain number of fields received from the server. I'm not sure I'm being clear but overall the "...
-1
votes
1
answer
27
views
Angular Formly Form hook OnInit -> field.xxx is possibly undefined
Angular version: 16.0
Formly version: 6.1.8
I'd need to create a cascated select for my app. The first field is a Material Autocomplete and then the next one a simple select
I'm struggling, however, ...
0
votes
0
answers
23
views
Formly select from observable and server data doesn't show the value
I'm trying to have a formly select field display the existing value automatically but for some reason it doesn't show up. Here's a simplified example: stackblitz (formly's forked) and here's the code:
...
0
votes
2
answers
21
views
Hide filed in Angular Formly
How to hide fields in formly , cause hide expression hiding the DOM by display:none which alter the position of other element in the current and previous rows .
I have a requirement to hold on to the ...
0
votes
0
answers
39
views
Code Splitting in Angular/Formly to avoid building the whole project for small changes
I'm building a webapp that requires an ever-growing collection of forms. Formly seems to be an excellent tool to do this because it's declarative and reusable. However, placing formly field config ...
1
vote
1
answer
82
views
Styling Formly Form Custom Wrapper + Custom Type
So I'd like to have a mat-autocomplete using formly-forms and have a add and delete button at the end of each autocomplete. Most importantly I want this "duo" of autocomplete + button to ...
1
vote
1
answer
67
views
Formly validation in Storybook throwing NG0100: ExpressionChangedAfterItHasBeenCheckedError
I'm working on a custom Formly wrapper for my form fields and I wanted to display the wrapper in Storybook. I found an excellent example on how to show the wrapper in Storybook (given that all of a ...
0
votes
0
answers
32
views
Type 'any[] | Observable<any[]> | undefined' is not assignable to type 'any[]'
Body:
I'm getting the following TypeScript error in my Angular application:
error TS2322: Type 'any[] | Observable<any[]> | undefined' is not assignable to type 'any[]'.
Type 'undefined' is not ...
0
votes
1
answer
214
views
How to configure formly custom components inside standalone components in angular 16
Angular Version: 16.0.4
Formly Version: 6.1.7
I just changed my Angular project to standalone components, which deleted all of the modules.
We developed custom formly components, such as input fields ...
0
votes
0
answers
26
views
Formly template field attribute with some html and a model value
Setting up my form fields in json but have problem to show readonly information from model/formState within the json field definitions.
This works in angular-formly:
"fieldGroup": [
{&...
0
votes
0
answers
181
views
How do I hide a Formly field in using conditions based on the value of a field in a different form-group using expressions?
In formly docs, you can create hide expressions like this:
{
key: 'iLikeTwix',
type: 'checkbox',
props: {
label: 'I like twix',
},
expressions: { hide: '!model.name' },
}
Or like this:
{...
0
votes
1
answer
62
views
Custom Formly Component not showing validation message on blur
I have a custom angular date picker component which uses ngb-datepicker and implements control value accessor. Now I create a formly component from this to use in my json form. This works fine but it'...
0
votes
1
answer
62
views
How to add tooltip to angular formly dropdown elements
I want to add tooltip to angular formly dropdown element, is there a way to solve this?
Tool tip should contain label - value of the dropdown elements.
Is there any tooltip property which we can use ...
0
votes
0
answers
24
views
ngx-formly password visibility toggle - angular
I want to add a custom input field using ngx-formly where I can toggle the password(eye). I have two fields in the form email/username and password. I tried some kinds of stuff, but not working for me
...
0
votes
1
answer
86
views
ngx-formly how to evaluate whether a multicheckbox answer is chosen
I am using ngx-formly and running into an issue with expressions on multicheckbox. I am attempting to see if the value of "Other" was selected. The box continually displays regardless of ...
0
votes
0
answers
110
views
Angular Material + Formly: Validation inside Nested Custom Types
I'm using Angular Material on a project right now, trying to implement the formly library with custom types.
Right now I'm working on Signup, Login, Password Forget and Password Reset Feature.
Since ...
1
vote
1
answer
263
views
Need to update input field label on runtime in ng-formly
Need to update input field label on runtime in ng-formly .
{
key: 'forename',
type:'input',
templateOptions: {
label: 'Forename'}
expressionProperties:{
label:...
0
votes
1
answer
574
views
Formly form not fully updated after changing field default value
I am trying to update the Formly form rendering after making some changes in the form scheme (the array of FormlyFormConfig objects). It works when I add a new object or if I change a field label, but ...
0
votes
1
answer
298
views
Async validation message not displaying in ngx-formly
When trying this example from the ngx-formly library, the message that comes from the async validation is not displaying under the field as exprected
https://formly.dev/docs/examples/validation/unique-...
0
votes
0
answers
117
views
how to use ngx-translate with formly-form to display dynamic error message
I am using formly in my angular application and ngx-translate for language translation. I have multiple form controls with some custom validation.
I want to display error messages based on input field ...
1
vote
0
answers
170
views
How to inject data into custom type field for ngx-formly?
my question is so simple: is it possible to inject data inside custom type field in a form created using ngx-formly?
I'm working on a Angular project (Angular 14) and I would like to create a select ...
0
votes
0
answers
293
views
Storybook error Injector has already been destroyed error when opening story for second time
Describe the bug
When any story is opened for first time is displayed correctly but when I open other story and return to one which was already opened I get error. How to solve this issue?
ERROR Error:...
0
votes
0
answers
189
views
Using a formly field, I want to mask input value
{
"key": "accountNum",
"type": "input",
"className": "col-lg-6 inputClass",
"templateOptions": {
"...
0
votes
0
answers
77
views
Stopping JSON powered NGX-Formly ngFor loop overwriting previous forms in a grid on the same page
In the example below I have a Formly form wrapped in a ngFor loop.The last form model overwrites all the previous ones. How can I stop that behaviour?
Parent that host the form loop:
<div class=&...
0
votes
0
answers
22
views
hiddenExpression has not worked on hidden filed Validation of formly in Angular 14
I used formly which is dynamic and fields using from the database
formly versions::-
"@ngx-formly/bootstrap": "^6.1.1",
"@ngx-formly/core": "^6.1.1",
...
0
votes
1
answer
315
views
Angular Material 15: How can I apply the panelClass property to `<mat-select>` using ngx-formly?
I'd like to style the dropdown panel of Angular Material <mat-select> with a specific width.
We're using formly to generate forms in the project.
This is how an example configuration of a select ...
0
votes
0
answers
41
views
How to handle i18n when formly json way
when we use formly with JSON powered way, how to use 18n?
https://formly.dev/docs/examples/other/json-powered
I search a way to specify a key in the json
{
"key": "lastName",
...
0
votes
0
answers
417
views
Angular Formly custom cross field validation check
Hope I can get some advice here.
I have a Angular Formly search form to search for client. The way of how the search form work is if ID is filled then 'surname' and 'date of birth' are not needed and ...
0
votes
0
answers
125
views
ngx formly formArray without formcontrol
I have a requirement to create a typeahead component inside a form and storing the results of the search in an array. I am new to angular formly and am trying to achieve the ask using a formArray. I ...
0
votes
1
answer
251
views
Use @ngx-formly with custom radio component (internal UI components)
I am working with a custom radio components and I'm having a hard time connecting the component to the form using formly v5.
This is how I would use the custom radio component
<custom-radio
name=&...
0
votes
0
answers
297
views
How to align Formly form-fields horizontally when using JSON Schema?
I use Formly form JSON schema to render my view. This way the inputs appear below the labels, yet I want the inputs to be displayed beside the labels.
I know that form-field-horizontal can be used to ...
0
votes
0
answers
64
views
Ngx formly form Multicheckbox - Angular 9
We are using ngx-formly form in our Angular 9 application. We have some issues with formly multicheckbox implementation. Since the multicheckbox value gets as an Object/ key-value pair. We convert it ...
0
votes
0
answers
304
views
How to set value of form control only after it is visible in Angular formly?
I have two radio button which has two values. On clicking of each value, two formcontrols get visible. Now I want to fill the value of those formcontrol. I am getting radiobutton selected based on ...
0
votes
1
answer
277
views
How to unit test form validation on angular using ngx-formly
I'm using ngx-formly (on V5) to generate a form with an input and a checkbox (here is the FormlyFieldConfig):
field: FormlyFieldConfig = {
className: 'database-header',
validators: {
validation: [
...
1
vote
1
answer
762
views
ngx formly repeated field with chips as array of string input angular
I have json object like this
{ num_info : [["a","b"],["c","d"]] }
and using ngx-formly i want to show this on the form.
So I have created 2 custom components ...
0
votes
1
answer
699
views
ngx formly custom repeat section not repeating value by default angular material
I am using ngx-formly library to create dynamic forms. So from this link, I am trying repeat custom component.
Here is the custom component
import { Component } from "@angular/core";
import {...
2
votes
1
answer
2k
views
How to hide fields of Formly form, due another model's fields
I have 2 Formly forms in my app.
I need to hide a field of one form, due the value of a field in the another one.
Formly documentation gives this option (https://formly.dev/examples/field-options/hide-...
0
votes
1
answer
281
views
How to match nested object keys with values from array with matching keys in lodash
Sorry for the confusing title. I have the results of a form generated from the ngx-formly library. They are an object with key and value pairs that look exactly like this:
Form Feedback
{
"...
0
votes
1
answer
406
views
Any examples on getting ngx-formly to work correctly with ngrx?
I'm trying to learn ngx-formly and ngrx for a project at work, does anyone know how to correctly get ngx-formly to bind/ update the ngrx store correctly?
I can get my data to initialize from the store ...
0
votes
0
answers
495
views
has-error not removed for fields having ng-touched class when removing validator using clearValidators()?
Dependencies used
"@angular/cli": "^11.2.10",
"@ngx-formly/bootstrap": "^5.10.22",
"@ngx-formly/core": "^5.10.22"
There is an issue with ...
0
votes
1
answer
362
views
How to focus first invalid ngx-formly field
I am using ngx-formly for creating dynamic form from field configuration. On submitting form, validation is showed correctly. I want to focus first invalid formly field.
0
votes
0
answers
540
views
JSON Schema / Formly dependent sub-schemas
This issue is a bit tricky to describe so bear with me and please ask questions if I am missing anything...
Say you have a json object that defines a list of features, each feature has a the same ...
0
votes
1
answer
445
views
How to perform async validation with debounce using ngx-formly?
I tried the following in my form config:
fields: FormlyFieldConfig[] = [
{
key: 'text',
type: 'input',
modelOptions: {
debounce: {
default: 2000,
},
...
1
vote
0
answers
2k
views
Change event for a form field in ngx-formly
Scenario - I would like to get the present field value, previous field value and fieldId whenever a particular field loses focus and call an API to perform some validations at the backend
html
<...
2
votes
0
answers
382
views
Why formly-field doesn't render the component?
I made input component and render component in formly.
This is simple thing: the app component is render the render-component and render-component is render the input component.
But the input ...
0
votes
1
answer
814
views
How to change color of Angular Formly description?
I am working with angular formly.
Here below is the Image of the Input Field and Its description.
What issue I am facing?
Initially the description attribute have some default color but I want to ...
0
votes
1
answer
616
views
How to save checkbox value as string with Formly?
I am currently using Formly to generate checkboxes. When a checkbox is ticked, the value is saved as true but I need it to be as a string like this "true". I also use a JSON to generate the ...
1
vote
0
answers
182
views
How can we add icon with text in form using ngx-fomly/ bootstrap
Did not get any document/info to add an icon with text on the form using ngx-formly/ bootstrap library.
Also trying to add icons using addon but in my project, only two icons display on the form (fa ...
1
vote
1
answer
1k
views
How to unit test ngx-formly?
I am trying to unit test ngx formly but I am getting the following error:
[Formly Error] The validator "emailValidator" could not be found.
Please make sure that is registered through the ...
0
votes
1
answer
954
views
Angular-Formly - Access Model names for calculated fields with key names containing dot(.)
I have a config json with 3 fields, the 3rd field being a calculated field from data in the previous 2 fields.
Now the catch here is I have dot(.) in their key names. e.g. "something.someone"...