angular 2 ngmodel with custom dropdown

Question

I have a custom component

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

and here is the template

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

I want to use it in the parent component like this:

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

but it does not work. Please help

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ünter Zöchbauer, Nov 29 '16 at 07:36

score 1 · Answer 1 · answered Nov 30 '16 at 01:45

ok here is the working component

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

and template:

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

and this is how we use it

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

angular 2 ngmodel with custom dropdown

1 Answers1