Angular 4 reactive form not working when nested in another component with jquery-steps plugin

Question

I have an app with few configurations so we decided to make a wizard that will guide the user through the necessary steps I though it would be simple since i already have the components ready but when inserting them to the wizard component, well they render but the dynamic validations we have are no longer there... To make it clearer we've implemented a client side validation where form fields turn from red to green using ngClass. On the component itself its working neatly but when i weave the component into the wizard (parent) then i lose this functionality

ill show the relevant parts of the code Business config component

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-business-setting',
  templateUrl: './business-setting.component.html',
  styleUrls: ['./business-setting.component.css']
})
export class BusinessSettingComponent implements OnInit, AfterViewInit {

  form: FormGroup;

  // if true we will not display the submit buttom
  isWizard;

  constructor(private formBuilder: FormBuilder, private router: Router) {
    if (this.router.url.includes('wizard')) {
      this.isWizard = true;
    }
   }

  ngOnInit() {
    this.form = this.formBuilder.group({
      companyName: [null, [Validators.required, Validators.minLength(3)]],
      companyEmail: [null, [Validators.required, Validators.email]],
      logoImage: [null, []],
      websiteUrl: [null, []],
      phoneNumber: [null, [Validators.required]],
      mobileNumber: [null, []],
      address: [null, [Validators.required]],
      city: [null, [Validators.required]],
      country: [null, [Validators.required]],
      branches: [null, []]

    });

  }
  ngAfterViewInit() {
    // start the tags input
    (<any>$('input[data-role=tagsinput], select[multiple][data-role=tagsinput]')).tagsinput();
  }

  saveForm() {
    console.log(this.form.value);
    console.log($('#branches').val());
  }
}

and the template

<form [formGroup]="form" >
    <div class="row">
        <div class="col-md-6">
            <div class="form-group" 
              [ngClass]= "{'has-danger': !form.get('companyName').valid && form.get('companyName').touched, 
                           'has-success': form.get('companyName').valid}">
                <label> Company Name : <span class="danger">*</span> </label>
                <input type="text" class="form-control required"
                [ngClass]= "{'form-control-danger': !form.get('companyName').valid && form.get('companyName').touched, 
                'form-control-success': form.get('companyName').valid}"
                formControlName="companyName"> </div>
        </div>
        <div class="col-md-6">
            <div class="form-group" [ngClass]= "{'has-danger': !form.get('companyEmail').valid && form.get('companyEmail').touched, 
            'has-success': form.get('companyEmail').valid}">
                <label> Company Email Address : <span class="danger">*</span> </label>
                <input type="email" class="form-control required" [ngClass]= "{'form-control-danger': !form.get('companyEmail').valid && form.get('companyEmail').touched, 
                'form-control-success': form.get('companyEmail').valid}"
                formControlName="companyEmail"> </div>
        </div>
    </div>

and now the parent (wizard) component again showing the relevant template part

  <form action="#" class="tab-wizard wizard-circle">
    <!-- Step 1 -->
     <h6>Store setting</h6>
        <section>
           <app-business-setting></app-business-setting>
        </section>
    </form>

I hope my question is clear as i don't understand the problem and why im noticing the validation part not working i dont know if its related to this https://github.com/angular/angular/issues/9281

UPDATE****

its not im using a third party plugin http://www.jquery-steps.com/ inside my parent controller (the wizard) im activating it like this

ngOnInit() {
    console.log('wizard after view init');
    (<any>$('.tab-wizard')).steps({
        headerTag: 'h6'
        , bodyTag: 'section'
        , transitionEffect: 'fade'
        , titleTemplate: '<span class="step">#index#</span> #title#'
        , labels: {
            finish: 'Submit'
        }
        , onFinished: function (event, currentIndex) {
           console.log('finished wizard');

        }
    });
}

this is causing the validation to stop working though i dont understand why