将 ngModel 中的 object 传递给自定义控件 Angular2

Question

我想创建包含其他自定义控件的自定义控件，并使用连接所有这些控件的 ngModel。喜欢：

个人搜索组件：

DeveloperSearchControl
- 名称 - 一些字符串输入
- 姓
- ProffesionSelect - 需要 ProffesionModel 的自定义控件
BuildingSearchControl
- 这里有一些自定义控件
CountryCustomControl - 需要 CountryModel 的自定义控件

人物列表组件： - 通过某些服务从 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>

ParentSearch 组件

...
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);
  }
}

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 是一个通用的 ControlValueAccessor，验证来自：http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/

所以我的问题是，当我为 children（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 的值在开始时为空。所以我必须在看起来很糟糕的 child 组件的模板中使用 *ngFor="value" 。有什么解决方案可以在模板验证之前初始化 object 吗？还是我这样做很不对？

Answer 1

有一种方法可以使用安全导航运算符进行双向绑定：

<input [ngModel]="value?.name" (ngModelChange)="value?.name ? value.name = $event : null">

支持：

将 ngModel 中的 object 传递给自定义控件 Angular2

Passing object in ngModel to a custom control Angular2

angular2-forms

angular2-ngmodel

angular