I want to create custom control which contains other custom controls and use ngModel that connects all of them. Like :
PersonSearchComponent :
So for now I have working version, but I think i have made something bad (maybe I should use FormBuilder):
PersonSearch Template :
<div>
<developer-search-control [(ngModel)]="searchModel.developerSearchModel"></developer-search-control>
<building-search-control [(ngModel)]="searchModel.buildingSearchModel"></building-search-control>
<country-select [(ngModel)]="searchModel.countryModel"><country-select>
</div>
ParentSearch component
...
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
}
}
Models : PersonSearchModel :
developerSearchModel : DeveloperSearchModel = new DeveloperSearchModel();
buildingSearchModel: BuildingSearchModel = new BuildingSearchModel();
countryModel : CountryModel;
DeveloperSearchModel :
name : string
surname : string
proffesion : ProfessionModel
Template developerSearchControl.component.html:
<div *ngIf="value">//This is the problem
<input [(ngModel)]="value.name"></input>
<input [(ngModel)]="value.surname"></input>
<profesion-select [(ngModel)]="value.ProffesionSelect">
</div>
developerSearchControl.component:
...
@Component({
selector: 'developer-search-control',
templateUrl: './developerSearchControl.component.html',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DeveloperSearchControlComponent),
multi: true,
}],
})
export class DeveloperSearchControlComponent extends ElementBase<DeveloperSearchModel > {
protected model: NgModel;
constructor(
@Optional() @Inject(NG_VALIDATORS) validators: Array<any>,
@Optional() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<any>,
) {
super(validators, asyncValidators);
}
}
profesionSelect.component
...
@Component({
selector: 'profesion-select',
template: `
<div>
<label *ngIf="label">{{label}}</label>
<dx-select-box
[dataSource]="data"
[(ngModel)]="value"
displayExpr="proffesionName"
[placeholder]="placeholder"
[searchEnabled]="true"
>
</dx-select-box>
</div>`,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: ProfessionComponent,
multi: true,
}],
})
export class ProfessionComponent extends ElementBase<string> 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<any>,
@Optional() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<any>,
) {
super(validators, asyncValidators);
}
ngOnInit() {
this.professionService.getDevelopersProfessions().subscribe(
data => {
this.data = data;
}
);
}
}
ElementBase is a generic ControlValueAccessor with validation from : http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/
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 :
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
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?
There's a way to use two-way binding with safe-navigation operator:
<input [ngModel]="value?.name" (ngModelChange)="value?.name ? value.name = $event : null">