Programmatically force selects an item in a primeng Listbox (p-listbox). Angular 2/PrimeNg

import { Component, ViewChild, KeyValueDiffer, KeyValueDiffers, OnInit, DoCheck} from '@angular/core';
import { SelectItem, Listbox } from 'primeng/primeng';
import { FormBuilder, FormControl, NgModel, FormGroup, Validators } from '@angular/forms';
import { MyFormComponent }   from './myform.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent implements OnInit, DoCheck{
    
    selectedGroup: any;
    groups: any [] = [];
    groupList: SelectItem [] = [] ;
    differ: any;
    
    @ViewChild('listBox') accessor: Listbox;
    @ViewChild('listBox', { read: NgModel }) model: NgModel;
    @ViewChild(MyFormComponent) myFormComponent: MyFormComponent;
   
      
    constructor(private differs:  KeyValueDiffers) {
       this.groups = [
         {"groupId": 1, "groupName": "Group1"},
         {"groupId": 2, "groupName": "Group2"},
         {"groupId": 3, "groupName": "Group3"},
         {"groupId": 4, "groupName": "Group4"},
         {"groupId": 5, "groupName": "Group5"},
         {"groupId": 0, "groupName": "Group0"}
      ];
      this.differ = differs.find([]).create(null);
    }
    
    resetFormOfChild() {
      this.myFormComponent.settingsForm.reset();
    }
  
      
    ngOnInit() {
      this.groups.forEach(gp=> this.groupList.push({label: gp.groupName, value: gp}));
      this.selectedGroup =  this.groups[0];
      console.log(this.myFormComponent);
      this.accessor.registerOnChange = (fn: (val: any) => void) => {
        this.accessor.onModelChange = (val) => {
          if(val && this.myFormComponent.settingsForm.dirty) {
            this.model.control.setValue(this.model.value);
            return;
          }
          return fn(val);
        };
      }
    }
   
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { AppComponent }   from './app.component';
import { MyFormComponent }   from './myform.component';

// Import PrimeNG modules
import { ListboxModule } from 'primeng/primeng';

@NgModule({
  imports:      [ BrowserModule, FormsModule,ListboxModule, ReactiveFormsModule ],
  declarations: [ AppComponent, MyFormComponent ],
  bootstrap:    [ AppComponent ],
})

export class AppModule { }

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

body {
  padding: 2em;
  font-family: Arial, Helvetica, sans-serif;
}



.colordiv {
    margin: 1% 0 0 1%;
}

.colorbox {
    border-radius: 5px;
    width: 20px;
    height: 20px;
    display: inline-block;
    box-sizing: border-box;
    float: left;
    margin: 0 1% 1% 0;
    border: 1px solid black;
}

.fixed .ui-datatable-scrollable-view{
  float: none!important;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    
    <!-- PrimeNG style dependencies -->
    <link rel="stylesheet" href="https://unpkg.com/primeng@2.0.1/resources/themes/omega/theme.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeng@2.0.1/resources/primeng.min.css" />

    <!-- 1. Load libraries -->
    <!-- Polyfill for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      // Copy of compiler options in standard tsconfig.json
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      // paths serve as alias
      'npm:': 'https://unpkg.com/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ts':                        'npm:plugin-typescript@4.0.10/lib/plugin.js',
      'typescript':                'npm:typescript@2.0.3/lib/typescript.js',
      'primeng':                   'npm:primeng@2.0.1'

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      primeng: {
        defaultExtension: 'js'
      }
    }
  });

  if (!global.noBootstrap) { bootstrap(); }

  // Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
  function bootstrap() {
    console.log('Auto-bootstrapping');

    // Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
    System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));

    // bootstrap and launch the app (equivalent to standard main.ts)
    Promise.all([
      System.import('@angular/platform-browser-dynamic'),
      getAppModule()
    ])
    .then(function (imports) {
      var platform = imports[0];
      var app      = imports[1];
      platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
    })
    .catch(function(err){ console.error(err); });
  }

  // Import AppModule or make the default AppModule if there isn't one
  // returns a promise for the AppModule
  function getAppModule() {
    if (global.noAppModule) {
      return makeAppModule();
    }
    return System.import('app/app.module').catch(makeAppModule)
  }

  function makeAppModule() {
    console.log('No AppModule; making a bare-bones, default AppModule');

    return Promise.all([
      System.import('@angular/core'),
      System.import('@angular/platform-browser'),
      System.import('app/app.component')
    ])
    .then(function (imports) {

      var core    = imports[0];
      var browser = imports[1];
      var appComp = imports[2].AppComponent;

      var AppModule = function() {}

      AppModule.annotations = [
        new core.NgModule({
          imports:      [ browser.BrowserModule ],
          declarations: [ appComp ],
          bootstrap:    [ appComp ]
        })
      ]
      return {AppModule: AppModule};
    })
  }
})(this);

 <p> SelectedGroup = </p>{{selectedGroup | json}}

<br/>
<br/>
<br/>
<br/>
  <p-listbox #listBox
       [options]="groupList" 
       [(ngModel)]="selectedGroup"></p-listbox>
       
       <br/>
      <button class="btn btn-success btn-sm" (click)="resetFormOfChild()">Reset Child's Form</button>
<br/>
<br/>
<br/>
<my-form></my-form>

<p>is form Dirty: {{myFormComponent.settingsForm.dirty}}</p>

# PrimeNG Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.

import { Component, ViewChild, KeyValueDiffer, KeyValueDiffers, OnInit, DoCheck} from '@angular/core';
import { SelectItem, Listbox } from 'primeng/primeng';
import { FormBuilder, FormControl, NgModel, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-form',
  templateUrl: 'app/myform.template.html'
})
export class MyFormComponent implements OnInit{
  
  settingsForm : FormGroup;
  
  constructor(private fb: FormBuilder) { }
  
  ngOnInit() {
    this.settingsForm= this.fb.group({
      settingName: ''
    });
  }
  
  
  
 
  
  
}

<form novalidate [formGroup]="settingsForm">
   <input type="text" formControlName="settingName">
</form>