我想创建包含其他自定义控件的自定义控件，并使用连接所有这些控件的 ngModel。喜欢 ：
人物搜索组件：
- 开发者搜索控件
- 名称 - 一些字符串输入
- 姓
- ProffesionSelect - 需要 ProffesionModel 的自定义控件
- 建筑物搜索控件
- 这里有一些自定义控件
- CountryCustomControl - 期望 CountryModel 的自定义控件
- PersonListComponent : - 通过某些服务从 PersonSearchComponent 导入有关项目的数据
- SomeOtherSearchComponent
- DeveloperSearchControl - 可重用
所以现在我有工作版本，但我认为我做错了（也许我应该使用 FormBuilder）：
人物搜索模板：
<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>
父搜索组件
...
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
}
}
型号：PersonSearchModel：
developerSearchModel : DeveloperSearchModel = new DeveloperSearchModel();
buildingSearchModel: BuildingSearchModel = new BuildingSearchModel();
countryModel : CountryModel;
开发者搜索模型：
name : string
surname : string
proffesion : ProfessionModel
模板 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);
}
}
专业选择组件
...
@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 是一个通用的 ControlValueAccessor 验证来自：http ://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/
所以我的问题是，当我为孩子（developerSearch、buildingSearch）创建模板时，没有为他们初始化通过 ngModel 传递的值，我得到：
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
因为 ngModel 的值在开始时为空。所以我必须在看起来很糟糕的子组件模板中使用 *ngFor="value" 。有没有办法在模板验证之前初始化对象？还是我这样做非常错误？