Angular Populate Child Control on Click

Question

I'm a total newbie to Angular and reactive forms.

I have a UI design where there are two select lists, the idea is that clicking on the first select list will populate the second select list. The first select list calls a method on the child component, which makes a request to an Http service that returns JSON data. The JSON is returned but the child component's select list is never repopulated. With Logging, I'm able to see that the method on the child component is being called, the JSON is being return. As a test, I also created a test component using the same template code and the only change in the component was that the select list was populated OnInit, and it worked perfectly.

Template: For some reason I can't get my template code to show, but I'm using *ngFor="let value of boardList" value="{{ value.boardURL }}">{{ value.name }} to populate the options of the select.

Component:

export class BoardForMinistryComponent implements OnInit {

    boardList: IBoard[];
    errorMessage: string;
    boardSelect: FormGroup;
    innerURL: string;

    constructor(private bService: BoardsService, private fb: FormBuilder) { }

    ngOnInit() {
        this.boardSelect = this.fb.group({
            boardSelector: ''
        });
    }

    reloadBoardList(theUrl: string): void {
        this.boardSelect = this.fb.group({
            boardSelector: ''
        });

        this.innerURL = theUrl;

        this.bService.getBoardsForMinistry(theUrl)
            .subscribe(b => this.boardList = b,
            error => this.errorMessage = <any>error);
    }
}

Eliseo Eliseo · Accepted Answer · 2017-11-08T22:04:46

you must subscribe to changes after create the form

export class BoardForMinistryComponent implements OnInit {
...
ngOnInit() {
    this.boardSelect = this.fb.group({
        boardSelector: ''
    });
    this.onChanges() //<--call a function
}
//the function onChanges
onChanges()
{
  this.myForm.get('boardSelector').valueChanges.subscribe(val => 
  {
       reloadBoardList(val);  //<--reload the board list
  });
}
reloadBoardList(theUrl: string): void {
    .....
}

Angular Populate Child Control on Click

1 Answers