Ngx-formly: Onchange event for select component.

[bejgumshirisha]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
I am using formly for dynamic form generation but I am facing problem in cascading selection.
eg:
when select box 1 is selected then based on the selection it should call API and update the selection box 2 list.I am using custom template for select box and whenever selection is changed then I wrote a event to detect that by from there I have to update the selection box b templateOptions.

Please tell us about your environment:
Mac OS,visual Studio Code,webpack

• Angular version: 2.0.X
  angular 7

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  All browsers

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[aitboudad]

you can use change event:

templateOptions: {
  change: (field, $event) => ...
}

[bejgumshirisha]

you can use change event:

templateOptions: {
  change: (field, $event) => ...
}

How can I use it in custom template.
Below is the procedure I followed

@Component({
  selector: 'app-formfield',
  templateUrl: '.<div class="demo-full-width margin-top" [formGroup]="form">
    <mat-select [placeholder]="field.templateOptions.placeholder" (selectionChange)="onSubmit($event,field,form)" [formControlName]="field.key" [formlyAttributes]="field" >
    <mat-option *ngFor="let item of field.templateOptions.options" [value]="item">{{item.label}}</mat-option>
    </mat-select>
    </div>',
  styleUrls: ['./formfield.component.css']
})
export class FormfieldComponent extends FieldType {
onSubmit(event, field: Field,form:FormGroup) {
  }
}

Now when ever I change selection I want to get reference of current key field and also list of all the fields so that I can update the list of another select box which is dynamically formed.

EG:
Select 1: list of countries
Select 2: list of states
based on select 1 input of select 2 should be changed.
I dont want to go with life cycle of field because I am using API calls to get the list of fields so life cycle details and code cannot be obtained from server.Even If I get then it would treat it as string and converting it again causes complications.
So kindly help me to get rid of this task.

[aitboudad]

```patch
-- (selectionChange)="onSubmit($event,field,form)"
++ (selectionChange)="to.change && to.change(field, $event)"

[bejgumshirisha]

-- (selectionChange)="onSubmit($event,field,form)"
++ (selectionChange)="to.change && to.change(field, $event)"

Thanks @aitboudad
One more doubt how can i get all formly fields json reference in custom FormlyFiled component(Custom template)

[aitboudad]

field.parent to get the parent field

[bejgumshirisha]

-- (selectionChange)="onSubmit($event,field,form)"
++ (selectionChange)="to.change && to.change(field, $event)"

Changed code

````
@Component({
selector: 'app-formfield',

template?: '.

{{item.name}}

',
styleUrls: ['./formfield.component.css']
})
export class FormfieldComponent extends FieldType {
changeOption(key) {
this.http.get('https://jsonplaceholder.typicode.com/users')
.subscribe((users: any[]) => this.getField(this.fields, key).templateOptions.options =
users.map(u => ({ label: u.name, value: u.id })));
}
getField(fields, key: string): FormlyFieldConfig {
for (let i = 0, len = fields.length; i < len; i++) {
if (fields[i].key === key){
return fields[i];
}
if (fields[i].fieldGroup && fields[i].fieldGroup.length > 0) {
return this.getField(fields[i].fieldGroup, key);
}
}
}

`

**Appcomponent.html**

Submit

**Appcomponent.ts**

export class AppComponent {
form = new FormGroup({});
fields: FormlyFieldConfig[] = [{
className: 'row',
fieldGroup: [
{
className: 'col-xs-12',
type: 'select',
key: 'documenttype',
templateOptions: {
options: [
{ value: '1', label: 'Soccer',nextKey:'documentRole' },
{ value: '2', label: 'Basketball',nextKey:'documentRole' }
],
valueProp: 'value',
labelProp: 'label',
label: 'Select Box',
placeholder: 'selectbox',
change:(field, $event) => {
}
},
}
]
},
{
className: 'row',
fieldGroup: [
{
className: 'col-xs-12',
type: 'select',
key: 'documentRole',
templateOptions: {
options: [
{ value: '1', label: 'Cricket' },
{ value: '2', label: 'VolleyBall'}
],
valueProp: 'value',
labelProp: 'label',
label: 'selectbox',
placeholder: 'selectbox',
},
}
]
}];
```

Now based on selection of field key documenttype input options for select key documentRole
values has to be changed.It should perform a API request and then list should be updated.
If I mention code on change of template options it is working but if i get the filed json from service call then it is reading as string.
I am not aware how to make it to be dynamic.

[aitboudad]

sorry but I haven't much time to track all your questions we've provided a bunch of examples in our demo site to avoid a such case, consider using stackoverflow or http://gitter.im/formly-js/ng2-formly.
Thanks!

[bejgumshirisha]

sorry but I haven't much time to track all your questions we've provided a bunch of examples in our demo site to avoid a such case, consider using stackoverflow or http://gitter.im/formly-js/ng2-formly.
Thanks!

Thanks @aitboudad for responding all of my queries

[anasvn]

@aitboudad I want to get repeat index on change of select. Can you check it and give me a solution ?
https://stackblitz.com/edit/angular-47rdkm-egsdne?file=src/app/app.component.ts

[aitboudad]

@anasvn field.parent.key

[anasvn]

@aitboudad I'm getting is field.parent.key as undefined

[aitboudad]

the provided example use V4, try with V5.

[samir-kamble]

This property is not working with when used with PrimeNG . Can you please help.

[lizarajesh]

Could you please provide code snippet to implement dropdown change in ngx formly.?

[aitboudad]

@lizarajesh see https://github.com/ngx-formly/ngx-formly/issues/1595#issuecomment-495608792

[medhamansi]

I have used ngx-formly to create a form . I have to create a progress bar which is dynamic and gets incremented as soon as a field is filled . I am unable to do that . If you could help

[aitboudad]

@medhamansi use modelChanges output to get notified whenever model changes and calculate the progress value based on your criteria :).
``patch @Component({ selector: 'formly-app-example', template:

• (modelChanges)="modelChanges($event)"
  ...>
  `,
  })
  export class AppComponent {
• modelChanges(model) {
• // update progress value
• }
  }

[mritunjaybs151086]

Hi Team,
I am using ngx-formly in my application.
where for dropdown change event, On first select its giving null, where as on second selection it gives first selected value.... can guide me what is the issue...
{
fieldGroupClassName: 'row',
fieldGroup: [
{
key: 'org_id',
type: 'select',
className: 'col-lg-6 col-sm-12',
templateOptions: {
key_name: 'name',
label: 'Organization:',
required: true,
label_col: 'col-sm-2',
field_col: 'col-lg-6 col-sm-12',
placeholder: 'Please Select',
options: this.getOrgnization, // --> this is the function where the options comes and populate in the dropdown.
change: (field , $event) => {
console.log(field.model.org_id);
}

}

get getOrgnization(): any {
this.http.subUrl = '/get_master/get_organization';
return this.http.postData();
}

please respond at the earliest...
Thanks in andvance.

[aitboudad]

@mritunjaybs151086 use https://github.com/ngx-formly/ngx-formly/issues/1851#issuecomment-544483541