How to create custom input component with ngModel working in angular 6?
AngularAngular Problem Overview
Since I use inputs with a lot of the same directives and .css classes applyed, I want to extract the repeated code to some component like this:
@Component({
selector: "app-input",
template: `
<div class="...">
<input type="..." name="..." class="..." [(ngModel)]="value" someDirectives...>
<label for="...">...</label>
</div>
`,
...
})
export class InputComponent implements OnInit {
// some implementation connecting external ngModel with internal "value" one
}
The problem here is creating a component in such a way that it can be used with ngModel as an ordinary input:
<app-input [(ngModel)]="externalValue" ... ></app-input>
I've found several solutions on the internet that can be partially or completely outdated now like: https://stackoverflow.com/questions/34948961/angular-2-custom-form-input/34998780#34998780 Can this be done in a better way in angular 6?
Angular Solutions
Solution 1 - Angular
I came across the same problem some time ago and want to share a minimal example that works with Angular 2+.
For newer Angular versions, there is a simplified approach (scroll down)!
Angular 2+
Assume you would like to use following code anywhere in your app:
<app-input-slider [(ngModel)]="inputSliderValue"></app-input-slider>
-
Now create a component called
InputSlider
. -
In the
input-slider.component.html
, add the following:<input type="range" [(ngModel)]="value" (ngModelChange)="updateChanges()">
-
Now we have to do some work in the
input-slider.component.ts
file:import {Component, forwardRef, OnInit} from "@angular/core"; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"; @Component({ selector: "app-input-slider", templateUrl: "./input-slider.component.html", styleUrls: ["./input-slider.component.scss"], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputSliderComponent), multi: true }] }) export class InputSliderComponent implements ControlValueAccessor { /** * Holds the current value of the slider */ value: number = 0; /** * Invoked when the model has been changed */ onChange: (_: any) => void = (_: any) => {}; /** * Invoked when the model has been touched */ onTouched: () => void = () => {}; constructor() {} /** * Method that is invoked on an update of a model. */ updateChanges() { this.onChange(this.value); } /////////////// // OVERRIDES // /////////////// /** * Writes a new item to the element. * @param value the value */ writeValue(value: number): void { this.value = value; this.updateChanges(); } /** * Registers a callback function that should be called when the control's value changes in the UI. * @param fn */ registerOnChange(fn: any): void { this.onChange = fn; } /** * Registers a callback function that should be called when the control receives a blur event. * @param fn */ registerOnTouched(fn: any): void { this.onTouched = fn; }
}
Of course you could add more functionality and value checks using this class, but I hope it will get you some ideas.
Quick explanation:
The trick is to add the provider NG_VALUE_ACCESSOR
on the decorator of the class and implement ControlValueAccessor
.
Then we need to define the functions writeValue
, registerOnChange
and registerOnTouched
. The two latter are directly called on creation of the component. That is why we need to variables (for example onChange
and onTouched
- but you can name them however you like.
Finally, we need to define a function that lets the component know to update the underlying ngModel. I did that with the function updateChanges
. It needs to be invoked whenever the value changes, either from outside (that's why it is called in writeValue
), or from inside (that's why it is called from the html ngModelChange
).
Angular 7+
While the first approach still works for newer versions, you might prefer the following version that needs less typing.
In earlier days, you would achieve two-way binding by adding something like this in the outer component:
<app-input-slider [inputSliderValue]="inputSliderValue" (inputSliderValueChange)="inputSliderValue = $event"></app-input-slider>
Angular implemented syntactic sugar for that, so you can now write
<app-input-slider [(inputSliderValue)]="inputSliderValue"></app-input-slider>
if you follow the steps below.
-
Create a component called
InputSlider
. -
In the
input-slider.component.html
, add the following:<input type="range" [(ngModel)]="inputSliderValue (ngModelChange)="inputSliderValueChange.emit(inputSliderValue)">
-
Now we have to do some work in the
input-slider.component.ts
file:import {Component, forwardRef, OnInit} from "@angular/core"; @Component({ selector: "app-input-slider", templateUrl: "./input-slider.component.html", styleUrls: ["./input-slider.component.scss"], providers: [] }) export class InputSliderComponent { /** * Holds the current value of the slider */ @Input() inputSliderValue: string = ""; /** * Invoked when the model has been changed */ @Output() inputSliderValueChange: EventEmitter<string> = new EventEmitter<string>(); }
It is important that the output property (EventEmitter) has the same name than the input property with the appended string Change
.
If we compare both approaches, we note the following:
- The first approach allows you to use
[(ngModel)]="propertyNameOutsideTheComponent"
as if the component were any form element. - Only the first approach lets you directly use validation (for forms).
- But the first approach needs more coding inside the component class than the second approach
- The second approach lets you use a two-way binding on your property with the syntax
[(propertyNameInsideTheComponent)]="propertyNameOutsideTheComponent"
Solution 2 - Angular
this can also be done like this, when you create a two way binding [()] you can bind it to a function using the same name + 'change' (in our case inputModel and inputModelChange) this way the ngModel will update when you trigger inputModelChange.emit('updatedValue'). and you only need to declare it once inside your component.
app-input.component.ts
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
@Component({
selector: 'app-input',
template: ` <input type="text" [(ngModel)]="inputModel" (ngModelChange)="inputModelChange.emit(inputModel)"/>`,
styleUrls: ['./app-input.component.scss']
})
export class AppInputComponent {
@Input() inputModel: string;
@Output() inputModelChange = new EventEmitter<string>();
}
app.component.html
<app-input [(inputModel)]="externalValue"></app-input>
Solution 3 - Angular
If you don't care about binding your variable by [ngModel]
in template-model or [formControl]
in reactive-form, you can use omer answer.
Otherwise:
-
Add
NG_VALUE_ACCESSOR
injection token into your component definition:import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ ..., providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AppInputComponent), multi: true } ] })
-
Implement
ControlValueAccessor
interface:export class AppInputComponent implements ControlValueAccessor { writeValue(obj: any): void { // Step 3 } registerOnChange(fn: any): void { this.onChange = fn; } registerOnTouched(fn: any): void { this.onTouched = fn; } setDisabledState?(isDisabled: boolean): void { } onChange: any = () => { }; onTouched: any = () => { }; }
-
Manage
value
when it changes:private _value; public get value(){ return this._value; } public set value(v){ this._value = v; this.onChange(this._value); this.onTouched(); } writeValue(obj: any): void { this._value = obj; } // Optional onSomeEventOccured(newValue){ this.value = newValue; }
Now you can use <app-input [(ngModel)]="externalValue" ... ></app-input>
Solution 4 - Angular
You can use @Input directive for passing the externalValue into the component and binding with it.
Here's a code:
@Component({
selector: "app-input",
template: `
<div class="...">
<input type="..." name="..." class="..." [(ngModel)]="externalValue" someDirectives...>
<label for="...">...</label>
</div>
`,
})
export class InputComponent implements OnInit {
@Input('externalValue') externalValue : any;
}
And in your parent component, you can use it like:
<app-input [externalValue]="externalValue" ... ></app-input>
Solution 5 - Angular
You can use shareservice which communicate between tow components without use input or output like below
Service
import {Injectable} from '@angular/core';
@Injectable()
export class ShareService {
public data: string;
setData(newdata : string){
this.data = newdata;
}
clearData(){
this.data = '';
}
}
Component that sets the value
export class PageA {
constructor(private shareService: ShareService, private router: Router){
}
gotoPageB(){
this.shareService.setData("Sample data");
this.router.navigate(['pageb']);
}
}
Component that gets the value
export class PageB {
constructor(private shareService: ShareService){ }
get somedata() : string {
return this.shareService.data;
}
}
The key here is to use a getter property in the component that gets the value (PageB in this example) so it is updated any time that the data service value changes.