角2个ngmodel自定义下拉

问题描述：

import { Component, OnInit } from "@angular/core"; 

import { EmploymentType } from './employmenttype.model'; 
import { EmploymentTypeService } from "../employmenttype/employmenttype.service"; 
@Component({ 
    selector: 'employmenttype-dropdown', 
    templateUrl: 'employmenttype-dropdown.html' 
}) 
export class EmploymentTypeDropdownComponent implements OnInit { 
    selectedEmploymentType:EmploymentType = new EmploymentType('None',0,0); 
    employmentTypes = []; 
    constructor(private employmentTypeService: EmploymentTypeService){ 
    } 
    ngOnInit() {  
     this.employmentTypeService.getEmploymentTypes() 
      .subscribe(
       (employmentTypes: EmploymentType[]) => {     
        this.employmentTypes = employmentTypes;     
       } 
     ); 
    } 
}

，这里是模板

<select class="form-control" required="required" name="employment-type"> 
    <option *ngFor="let employmenttype of employmentTypes" value={{employmenttype.id}}> 
    {{employmenttype.name}} 
    </option> 
</select>

我想在这样的父组件使用它：

<employmenttype-dropdown ([ngModel])="employee?.employmentType" ></employmenttype-dropdown>

但它不起作用。请帮助

http://stackoverflow.com/ questions/34948961/angular-2-custom-form-input，http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html，http：// almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel –

@GünterZöchbauer感谢您的链接 – aldo

答

确定这里是作业组件

import { Component, OnInit, forwardRef } from "@angular/core"; 
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 

import { EmploymentType } from './employmenttype.model'; 
import { EmploymentTypeService } from "../employmenttypes/employmenttype.service"; 


const noop =() => { 
}; 
export const EmploymentTypeDropdownComponentValueAccessor: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => EmploymentTypeDropdownComponent), 
    multi: true 
}; 

@Component({ 
    selector: 'employmenttype-dropdown', 
    templateUrl: 'employmenttype-dropdown.html', 
    providers: [EmploymentTypeDropdownComponentValueAccessor] 
}) 
export class EmploymentTypeDropdownComponent implements OnInit,ControlValueAccessor { 
    employmenttypes = []; 
    _value:any=''; 


    get value(): any { return this._value; }; 

    set value(v: any) { 
     if (v !== this._value) { 
      this._value = v; 
      this.onChange(v); 
     } 
    } 

    writeValue(value: any) { 
     this._value = value; 
     this.onChange(value); 
    } 

    onChange = (_) => {}; 
    onTouched =() => {}; 
    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 


    constructor(private service: EmploymentTypeService){ 
    } 
    ngOnInit() { 

     this.service.getEmploymentTypes() 
      .subscribe(
       (items: EmploymentType[]) => {      
        this.employmenttypes = items;     
       } 
     ); 
    } 
}

和模板：

<select class="form-control" required="required" name="employmenttype"> 
    <option *ngFor="let x of employmenttypes" value={{x.id}}> 
    {{x.name}} 
    </option> 
</select>

，这是我们如何使用它

<employmenttype-dropdown ([ngModel])="employee?.employmentType" name="employmenttype" ></employmenttype-dropdown>

角2个ngmodel自定义下拉

相关推荐