मेरे पास इस तरह से सरल कस्टम इनपुट घटक है,
import {Component, Provider, forwardRef} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
const noop = () => {};
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
};
@Component({
selector: 'custom-input',
template: `
<input class="form-control"
[(ngModel)]="value" name="somename"
(blur)="onTouched()">
`,
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor{
//The internal data model
private _value: any = '';
//Placeholders for the callbacks
private _onTouchedCallback: () => void = noop;
private _onChangeCallback: (_:any) => void = noop;
//get accessor
get value(): any { return this._value; };
//set accessor including call the onchange callback
set value(v: any) {
if (v !== this._value) {
this._value = v;
this._onChangeCallback(v);
}
}
//Set touched on blur
onTouched(){
this._onTouchedCallback();
}
//From ControlValueAccessor interface
writeValue(value: any) {
this._value = value;
}
//From ControlValueAccessor interface
registerOnChange(fn: any) {
this._onChangeCallback = fn;
}
//From ControlValueAccessor interface
registerOnTouched(fn: any) {
this._onTouchedCallback = fn;
}
}
और मेरे पास इस तरह ऐप मॉड्यूल है,
/**
* Created by amare on 8/15/16.
*/
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AppComponent } from './app/app.component';
import {CustomInputComponent} from "./app/shared/custom.input.component";
import {RouterModule} from "@angular/router";
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule, FormsModule, RouterModule ],
declarations: [ AppComponent, CustomInputComponent],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
और मुख्य
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
और मैंने अपने कस्टम इनपुट का उपयोग अपने घटकों में से एक के रूप में किया है, जैसा कि नीचे दिखाया गया है, लेकिन 'अनिर्दिष्ट नाम विशेषता के साथ फॉर्म नियंत्रण के लिए कोई मूल्य अभिगमकर्ता' नहीं मिल रहा है।
<custom-input name="firstName" [(ngModel)]="firstName"></custom-input>
और app.component इस तरह दिखता है
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
firstName: string;
}