Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 10:30
    prachi23S edited #3016
  • 10:25
    kashidP commented #3018
  • 09:47
    kashidP commented #3018
  • 07:58
    netlify[bot] commented #3023
  • 07:54

    aitboudad on main

    feat(material): pass field to s… (compare)

  • 07:54
    aitboudad closed #3023
  • 07:54
    aitboudad closed #2895
  • 07:53
    aitboudad synchronize #3023
  • 07:50
    netlify[bot] commented #3023
  • 07:36
    aitboudad opened #3023
  • 07:22

    aitboudad on main

    feat(core): Allow passing model… (compare)

  • 07:22
    aitboudad closed #3022
  • 07:22
    aitboudad closed #2943
  • 07:21
    netlify[bot] commented #3022
  • 07:07
    netlify[bot] commented #3022
  • 06:58
    aitboudad synchronize #3022
  • 06:55
    aitboudad opened #3022
  • 06:38
    aitboudad closed #3018
  • 06:38
    aitboudad commented #3018
  • 06:17
    renovate[bot] edited #2326
Abdellatif Ait boudad
@aitboudad
@farakk the expression property does not accept a string value
farakk
@farakk
@aitboudad Thanks for responding. Maybe you can make that happen in the future. Happy holiday
Dominic Watson
@intellix
when I do a control.setValue(something) it's running validation and I can't for the life of me figure out how to mark the field as untouched:
phoneCtrl.setValue(value);
phoneCtrl.markAsPristine();
phoneCtrl.markAsUntouched();
Abdellatif Ait boudad
@aitboudad
@intellix markAsUntouched should work I think, I may help if you could provide a reproduction
1 reply
farakk
@farakk
@aitboudad I am trying not to show anything when I move to say step 3 in a stepper with 4 steps. I just want to see the PREVIOUS NEXT buttons at the bottom. So I can use only the bottom NEXT button to move to step 4
Dominic Watson
@intellix

I'm trying to create a "Master Checkbox" which allow you to toggle/untoggle checkboxes inside it: https://stackblitz.com/edit/ngx-formly-ui-material-bs8vzf?file=src%2Fapp%2Fapp.component.ts - it's rendering them fine but I'm getting an error in console:

control.registerOnChange is not a function

Dominic Watson
@intellix
I think the problem is formControl on the parent/master checkbox
Dominic Watson
@intellix
ok I solved it by removing the formControl :)
farakk
@farakk
I am trying NOT to show anything apart from NEXT button when I move to say step 3 in a stepper with 4 steps. I just want to see the PREVIOUS NEXT buttons at the bottom. So I can use only the bottom NEXT button to move to step 4
Abdellatif Ait boudad
@aitboudad
@farakk not clear, you may check our stepper example https://formly.dev/examples/advanced/multi-step-form
Jörg Vanderhoeven
@jvdhoeven

hello all, first of all thanks for your great library and your efforts!

Is there a way to extend/modify the model within a custom template?

i have different data that all has the same field with its translation texts. but the list of translation texts are not always complete. But in the UI i always want to show the complete list of languages, so the user can fill the missing translation texts.

list of languages:

{
  languages: [
    'de', 'en', 'fr', 'es'
  ]
}

initial model example:

{
  someItem: 'foo',
  descriptions: {
    { locale: 'en', value: 'English value' },
    { locale: 'de', value: 'Deutscher wert' }
  }
}

should get modified into

{
  someItem: 'foo',
  descriptions: {
    { locale: 'en', value: 'English value' },
    { locale: 'de', value: 'Deutscher wert' },
    { locale: 'fr', value: '' },
    { locale: 'es', value: '' }
  }
}

I thought that I could build a custom template that gets the translation texts as a model and then extends the model with the missing languages so that they can get filled over the UI. I used a FieldArrayType for descriptions and tried to add items on ngOnInit within the tempalte, but this does throw errors.

Is this even possible or is this the wrong approach?

I guess the another approach would be to enhance the original model from outside, but just wanted to ask. Thanks in advance!

abhip5369
@abhip5369
Hi All,
Is it possible to have paginator with formly repeat section ? I have implemented it, but there seems to be some weird issue when I change the page : https://stackblitz.com/edit/angular-ap3aic-cqfvgi?file=src/app/repeat-section.type.ts
smohanui
@smohanui

Hi all,
I am using formly for form building. In the form on submitting will redirect to preview view, In the form
`<div *ngIf="!showData">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<formly-form [form]="form" [model]="model" [fields]="fields">
</formly-form>
<button type="submit" color="primary" mat-raised-button> Submit </button>
<button type="reset" color="warn" mat-raised-button> Reset </button>
</form>
</div>

<div *ngIf="showData">
{{model | json}}
<button type="button" (click)="edit()">edit</button>
<button type="button" (click)="onOk()">ok</button>
</div>`

And .ts :
`onSubmit() { this.showData = true; }

edit (){ this.showData = false; }

onOk (){
this.showData = false;
if (this.form.valid) {
alert(JSON.stringify(this.model, null, 2));
}
this.options.resetModel(); } `

submit > Ok => formdata is resetting
submit > Edit > submit > Ok => formdata is not resetting
Required to reset data in both above cases. how to acheive it?
For reproduction : stackBlitz

Abdellatif Ait boudad
@aitboudad
@abhip5369 seems there a bug somewhere 🤔, could you please fill an issue in Formly repo
@jvdhoeven why not just extend the model first before passing it to Formly
Abdellatif Ait boudad
@aitboudad
@smohanui you've missed passing options input to formly-form:
<formly-form
  [form]="form"
  [model]="model"
  [fields]="fields"
+  [options]="options">
</formly-form>
abhip5369
@abhip5369

@abhip5369 seems there a bug somewhere 🤔, could you please fill an issue in Formly repo

Sure @aitboudad

abhip5369
@abhip5369

@abhip5369 seems there a bug somewhere 🤔, could you please fill an issue in Formly repo

As requested, ngx-formly/ngx-formly#2808. Please let me know, if I need to provide additional info & edit anything. Note: In Environment I filled : "Angular-v11 | Stackbliz" as I am not sure what to fill there.

smohanui
@smohanui
Hi @aitboudad , thank you for your reply.
I updated as suggested but still same behavior.
submit > Ok => formdata is resetting
submit > Edit > submit > Ok => formdata is not resetting
can you please help me how can i reset form data from script ?
For reproduction : stackBlitz
Garet Jax
@ankurkhairatkar_twitter

Hi, I want to show a custom validation message, that selected option for select type is 'inactive'. How can I validate the default value of a select type (set after an observable of options has been returned) in edit flow? The options structure is as follows,
[
{id: 1, name: 'abc', isactive: false}
]
I want to validate the selected option or the default value against the 'isactive' flag.

Thanks

Aleix Suau
@aleixsuau
Hi,
I'd like to run "expressionproperties" when I submit the form or programatically, do you know if it is possible?
Mrigank Taxak
@mrigank_taxak_twitter
Can anyone please help me with the how-to use formly lifecycle hooks in JSON-schema, I want to call a backend API in my second field after selecting the option from first field using ID.
Dominic Watson
@intellix
are there any examples of using multiple inputs to create 1x value? For example I need to create an ISO Duration input:
[ Days ] [ Hours ] [ Minutes ] [ Seconds ] which outputs a value like: "P1D5M4S" - so to me that seems like an input with 4x text inputs, which emits 1x value when any of those change
I don't even know where to start with that within Angular itself to be honest, let alone doing it in Formly... maybe just a group of inputs and then process it in my submit? would be nice to have a custom input that outputs a text value
Dominic Watson
@intellix
I guess a simpler example would be like a Math field. You provide a value to [ a ] [ b ] and it returns them added together
Dominic Watson
@intellix
I think due to needing to parse the ISO Duration on input and convert multiple inputs into a single ISO Duration on any of the inputs changing, that I need a custom
ControlValueAccesor but then I'm not sure how to tie that into Formly
Dominic Watson
@intellix
Created this in raw Angular for multiple inputs for one Control: https://stackblitz.com/edit/angular-ivy-iso-duration-control-value-accessor
Dominic Watson
@intellix
dtienq
@dtienq
hello
Younes Manton
@ymanton
Is there a good example of a row/col layout on top of formly-material? All the examples I see are bootstrap-based.
Mrigank Taxak
@mrigank_taxak_twitter
I want to change the format model of data after selection from multicheckbox. it is coming now as a key value pair object but i want to produce it as a array of object, anyone can help ?
Younes Manton
@ymanton
@aitboudad Thanks, that helped.
Jörg Vanderhoeven
@jvdhoeven
hey everyone, i have a page with two independent formly forms with ng-zorro-ant UI. Both have the same formly configuration. After the form gets rendered, i get a warning that the generated id's of the inputs are duplicate. Is there any way how i could maybe prefix the ids?
Maybe by using an extention and prepopulate?
Jörg Vanderhoeven
@jvdhoeven
Ok, using an extention onPopulate works. i can set the prefix with formly options and prefix the field.id with it. Thanks anyways ;)
Sergey Koryshev
@Ace-Lightning
Hello, could you please give me an advice how to link lifecycle hooks with JSON-schema in formly?
Abdellatif Ait boudad
@aitboudad
Glauber Funez
@glauberfunez_twitter

Hi guys, I'm having the following problem after upgrading to V6
ngx-formly/ngx-formly#2960

I don't know if it can be something to any wrapper I have.

html example:

<ng-template #matPrefix></ng-template>
<ng-container #fieldComponent></ng-container>
<ng-template #matSuffix></ng-template>

typescript

@ViewChild('matPrefix') matPrefix: TemplateRef<any>;
@ViewChild('matSuffix') matSuffix: TemplateRef<any>;

ngAfterViewInit(): void {
         if (this.matPrefix) {
            Promise.resolve().then(() => (this.to.prefix = this.matPrefix));
        }

        if (this.matSuffix) {
            Promise.resolve().then(() => (this.to.suffix = this.matSuffix));
        }
    }
Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter @glauberfunez_twitter check the latest update here https://main.formly.dev/examples/other/material-prefix-suffix:
export class FormlyWrapperAddons extends FieldWrapper implements AfterViewInit {
  @ViewChild('matPrefix', { static: true }) matPrefix: TemplateRef<any>;
  @ViewChild('matSuffix', { static: true }) matSuffix: TemplateRef<any>;

  ngAfterViewInit() {
    if (this.matPrefix) {
      this.to.prefix = this.matPrefix;
    }

    if (this.matSuffix) {
      this.to.suffix = this.matSuffix;
    }
  }

  ...
}
Glauber Funez
@glauberfunez_twitter

I noticed some changes in V6, for example.
in V5 I had a type called autocomplete and it had a wraper around it with a loading.
So when I wanted to make the loading appear, I did it like this:

this.field.templateOptions = {
             ...this.field.templateOptions,
             loading: {
                 show: true
             }
         };

This at runtime, but it seems to me that it doesn't work now, I tried calling up to this.options.detectChanges(this.field); after the code above.
and in my html code in the wraper i have something like

<!-- Component Type -->
<ng-container #fieldComponent></ng-container>

<!-- MAT SUFFIX -->
<ng-template #matSuffix>
    <ng-container *ngIf="to.matSuffix || to.loading?.show">
        <!-- Loading -->
        <ng-container *ngIf="to.loading?.show">
            <div class="vimbo-mat-addons">
                <span class="spacer"></span>
                <span class="vimbo-mat-addons-suffix loading" [ngClass]="to.loading?.className" [ngStyle]="to.loading?.theme">
                    <mat-progress-spinner
                        class="mt-2"
                        [color]="'accent'"
                        [mode]="'indeterminate'"
                        [diameter]="20">
                    </mat-progress-spinner>
                </span>
            </div>
        </ng-container>
    </ng-container>
</ng-template>

Am I doing something wrong?

Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter that's a bug, please fill an issue in our repo
Glauber Funez
@glauberfunez_twitter
alright, i will do that.
Is the v6.0.0-next.1 version in your opinion stable enough to be used in production?
Glauber Funez
@glauberfunez_twitter
Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter it may contain some regression so I would wait until the beta version at least unless you need some of its features
Glauber Funez
@glauberfunez_twitter
I actually have scenarios that have very large objects nested, which in v5 doesn't work properly and in v6 after upgrading, it worked the first time.
example using FieldArrayType, if I call this.add() create the new position in the model, I can see it debugging, but it doesn't reflect to this.form.value for example.
seems to create only in this.model
Abdellatif Ait boudad
@aitboudad
@glauberfunez_twitter v6 is better than v5 in terms of performance, so the this.form.value is populated with a delay in v5 if I'm not wrong.