title: Passing object in ngModel to a custom control Angular2
body: <p>I want to create custom control which contains other custom controls and use ngModel that connects all of them.
  Like : </p>
  
  <p>PersonSearchComponent :</p>
  
  <ul>
  <li>DeveloperSearchControl 
  
  <ul>
  <li>Name - some string input</li>
  <li>Surname </li>
  <li>ProffesionSelect - custom control expecting ProffesionModel</li>
  </ul></li>
  <li>BuildingSearchControl 
  
  <ul>
  <li>Some custom controls here</li>
  </ul></li>
  <li>CountryCustomControl - custom control expecting CountryModel</li>
  </ul>
  
  <hr>
  
  <ul>
  <li>PersonListComponent :
  -imported data about items from PersonSearchComponent by some service</li>
  </ul>
  
  <hr>
  
  <ul>
  <li>SomeOtherSearchComponent
  
  <ul>
  <li>DeveloperSearchControl - reusable</li>
  </ul></li>
  </ul>
  
  <p>So for now I have working version, but I think i have made something bad (maybe I should use FormBuilder):</p>
  
  <p>PersonSearch Template :</p>
  
  <pre><code>    &lt;div&gt;
              &lt;developer-search-control [(ngModel)]="searchModel.developerSearchModel"&gt;&lt;/developer-search-control&gt;
              &lt;building-search-control [(ngModel)]="searchModel.buildingSearchModel"&gt;&lt;/building-search-control&gt;
              &lt;country-select [(ngModel)]="searchModel.countryModel"&gt;&lt;country-select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>ParentSearch component</p>
  
  <pre><code>...
  export class PersonSearch {
    @Output() searchDataEmitter= new EventEmitter();//Exports data to above component which contains this, and listComponent
  searchModel : PersonSearchModel : new PersonSearchModel();
  
      performSearch()
      {
          //gets data from service with searchModel and searchDataEmitter transpors it to above component
      }
  }
  </code></pre>
  
  <p>Models :
  PersonSearchModel :</p>
  
  <pre><code>developerSearchModel : DeveloperSearchModel = new DeveloperSearchModel();
  buildingSearchModel: BuildingSearchModel = new BuildingSearchModel();
  countryModel : CountryModel;
  </code></pre>
  
  <p>DeveloperSearchModel :</p>
  
  <pre><code>name : string
  surname : string
  proffesion : ProfessionModel
  </code></pre>
  
  <p>Template
  developerSearchControl.component.html:</p>
  
  <pre><code>&lt;div *ngIf="value"&gt;//This is the problem
       &lt;input [(ngModel)]="value.name"&gt;&lt;/input&gt;
       &lt;input [(ngModel)]="value.surname"&gt;&lt;/input&gt;
       &lt;profesion-select [(ngModel)]="value.ProffesionSelect"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>developerSearchControl.component:</p>
  
  <pre><code>...
  @Component({
    selector: 'developer-search-control',
    templateUrl: './developerSearchControl.component.html',
    providers: [{
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() =&gt; DeveloperSearchControlComponent),
      multi: true,
    }],
  })
  
  export class DeveloperSearchControlComponent extends ElementBase&lt;DeveloperSearchModel &gt; {
    protected model: NgModel;
  
    constructor(
      @Optional() @Inject(NG_VALIDATORS) validators: Array&lt;any&gt;,
      @Optional() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array&lt;any&gt;,
    ) {
      super(validators, asyncValidators);
    }
  }
  </code></pre>
  
  <p>profesionSelect.component</p>
  
  <pre><code>    ...
  @Component({
      selector: 'profesion-select',
      template: `
       &lt;div&gt;
          &lt;label *ngIf="label"&gt;{{label}}&lt;/label&gt;
          &lt;dx-select-box 
              [dataSource]="data" 
              [(ngModel)]="value" 
              displayExpr="proffesionName" 
              [placeholder]="placeholder"
              [searchEnabled]="true"
              &gt;
          &lt;/dx-select-box&gt;
      &lt;/div&gt;`,
          providers: [{
          provide: NG_VALUE_ACCESSOR,
          useExisting: ProfessionComponent,
          multi: true,
      }],
  })
  
  export class ProfessionComponent extends ElementBase&lt;string&gt; implements OnInit {
      private data: ProfessionModel[];
      private label: string = 'proffesion :';
      private placeholder: string = 'Select profession';
      @ViewChild(NgModel) model: NgModel;
  
      constructor(private proffesionService: ProfessionDataService,
          @Optional() @Inject(NG_VALIDATORS) validators: Array&lt;any&gt;,
          @Optional() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array&lt;any&gt;,
      ) {
          super(validators, asyncValidators);
      }
  
      ngOnInit() {
          this.professionService.getDevelopersProfessions().subscribe(
              data =&gt; {
                  this.data = data;
              }
          );
      }
  }
  </code></pre>
  
  <p>ElementBase is a generic ControlValueAccessor with validation from : <a href="http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/" rel="noreferrer">http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/</a></p>
  
  <p>So my problem is that when I create the template for children (developerSearch, buildingSearch) the value passed with ngModel is not initialized for them and i get :</p>
  
  <pre><code>EXCEPTION: Uncaught (in promise): Error: Error in ./DeveloperSearchControlComponent class DeveloperSearchControlComponent - inline template:2:33 caused by: Cannot read property 'name' of null
  Error: Error in ./DeveloperSearchControlComponent class DeveloperSearchControlComponent - inline template:2:33 caused by: Cannot read property 'name' of null
  </code></pre>
  
  <p>Because the value from ngModel is null at start. So I have to use *ngFor="value" in templates of child components which looks bad.
  Is there any solution to initialize the object before template verification? or Im doing this very wrong?</p>