angular2 rc.5 कस्टम इनपुट, अनिर्दिष्ट नाम

Question

साथ प्रपत्र नियंत्रण के लिए कोई मूल्य एक्सेसर मैं, इस तरह सरल कस्टम इनपुट घटक है

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

Answer 1

मेजबान में कस्टम इनपुट घटक को ngDefaultControl मुद्दा जोड़ने हल की तरह लग रहा है, धन्यवाद @danieleds

Answer 2

को जोड़ता है ngDefaultControl जोड़ें। उदाहरण के लिए

<inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)" value="valor" ngDefaultControl> </inline-editor> 

फिर import { FORM_DIRECTIVES } from '@angular/common';

अंत में निर्देशों: [FORM_DIRECTIVES]

यह ऊपर टिप्पणी

Answer 3

कस्टम इनपुट घटक को ngDefaultControl जोड़े के लिए :) धन्यवाद काम करेंगे। यह दो-तरफा डाटाबेसिंग जोड़ता है, आपको मूल्य एक्सेसर विधियों को लागू नहीं करना चाहिए जबतक कि आप कुछ अद्वितीय नहीं कर रहे हैं।

<custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input>