11import { Component } from '@angular/core' ;
22import { FormGroup } from '@angular/forms' ;
33import { FormlyFieldConfig } from '@ngx-formly/core' ;
4- import { distinctUntilChanged , map , startWith , tap } from 'rxjs/operators' ;
4+ import { distinctUntilChanged , map , startWith } from 'rxjs/operators' ;
55
66interface Model {
77 readonly player : string ;
@@ -47,12 +47,18 @@ export class AppComponent {
4747 { id : '3' , name : 'Cleveland' , sportId : '2' } ,
4848 { id : '4' , name : 'Miami' , sportId : '2' } ,
4949 ] ;
50- const sportControl = this . form . get ( 'sport' ) ;
50+ const sportControl = field . form . get ( 'sport' ) ;
5151 field . templateOptions . options = sportControl . valueChanges . pipe (
52- distinctUntilChanged ( ) ,
53- tap ( ( ) => field . formControl . setValue ( null ) ) ,
5452 startWith ( sportControl . value ) ,
55- map ( sportId => teams . filter ( team => team . sportId === sportId ) ) ,
53+ distinctUntilChanged ( ) ,
54+ map ( sportId => {
55+ const options = teams . filter ( team => team . sportId === sportId ) ;
56+ if ( ! options . find ( option => sportId === option . id ) ) {
57+ field . formControl . setValue ( null ) ;
58+ }
59+
60+ return options ;
61+ } ) ,
5662 ) ;
5763 } ,
5864 } ,
@@ -78,12 +84,18 @@ export class AppComponent {
7884 { id : '7' , name : 'Miami (Player 1)' , teamId : '4' } ,
7985 { id : '8' , name : 'Miami (Player 2)' , teamId : '4' } ,
8086 ] ;
81- const teamControl = this . form . get ( 'team' ) ;
87+ const teamControl = field . form . get ( 'team' ) ;
8288 field . templateOptions . options = teamControl . valueChanges . pipe (
83- distinctUntilChanged ( ) ,
84- tap ( ( ) => field . formControl . setValue ( null ) ) ,
8589 startWith ( teamControl . value ) ,
86- map ( teamId => players . filter ( player => player . teamId === teamId ) ) ,
90+ distinctUntilChanged ( ) ,
91+ map ( teamId => {
92+ const options = players . filter ( team => team . teamId === teamId ) ;
93+ if ( ! options . find ( option => teamId === option . id ) ) {
94+ field . formControl . setValue ( null ) ;
95+ }
96+
97+ return options ;
98+ } ) ,
8799 ) ;
88100 } ,
89101 } ,
0 commit comments