Angular2 rc6チェックした後に式が変更されました

Question

私はhttp://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodelのチュートリアルに従ってカスタム要素を作成しました。

1つのカスタムコンポーネントとngmodelによって同じフィールドにリンクされた別のコンポーネント（入力フィールド）の2つのフィールドがあるフォームがあります。

カスタムコンポーネントの値を編集すると、「オリジナル例外：チェックされた後に式が変更されました」という例外がスローされます。ただし、通常のフィールドの変更によって、カスタム要素への変更が正しくトリガーされます。

これはコードである：

<custom-component [control]="surname1" [(ngModel)]="person.surname1" [name]="'surname1'" formControlName="surname1">Add surname:</custom-component> 

<input type="text" name="surname2" id="surname2" formControlName="surname1" [(ngModel)]="person.surname1" /> 

とカスタム要素：

const noop =() => {}; 

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => MyInputComponent2), 
    multi: true 
}; 

@Component({ 
    selector: 'custom-component', 
    template: `<label><ng-content></ng-content></label> 
        <input type="text" name="{{name}}" [(ngModel)]="value" 
         (ngModelChange)="changed($event)" 

         (blur)="onBlur()" 
        /> 
    `, 
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] 
}) 
export class CustomComponent implements ControlValueAccessor { 

    @Input() control: FormControl; 
    @Input() name: any; 
    private innerValue: any = ''; 

    private onTouchedCallback:() => void = noop; 
    private onChangeCallback: (_: any) => void = noop; 

    //get accessor 
    get value(): any { 
     return this.innerValue; 
    }; 

    //set accessor including call the onchange callback 
    set value(v: any) { 
     if (v !== this.innerValue) { 
      this.innerValue = v; 
      this.onChangeCallback(v); 
     } 
    } 

    //Set touched on blur 
    changed(event) { 
     this.onTouchedCallback(); 
    } 

    onBlur() { 
     this.onTouchedCallback(); 
    } 

    //From ControlValueAccessor interface 
    writeValue(value: any) { 
     if (value !== this.innerValue) { 
      this.innerValue = value; 
     } 
    } 

    //From ControlValueAccessor interface 
    registerOnChange(fn: any) { 
     this.onChangeCallback = fn; 
    } 

    //From ControlValueAccessor interface 
    registerOnTouched(fn: any) { 
     this.onTouchedCallback = fn; 
    } 
} 

enableProdModeを（使用する場合、それが解決します）。インラインテンプレート - ./MFormComponentクラスMFormComponentでエラーが発生しました：：55：117原因

core.umd.js：5995 EXCEPTIONが、カントは、開発

**** ERROR（クローム出力）でこれを使用しますby：式がチェックされた後に変更されました。以前の値： 'surtest'現在の値： 'surtes'。

core.umd.js：5997 ORIGINAL EXCEPTION：式がチェックされた後に変更されました。以前の値： 'surtest'現在値：ExpressionChangedAfterItHasBeenCheckedError.BaseErrorでExpressionChangedAfterItHasBeenCheckedError.Error（ネイティブ） で 'surtes'

を新しいExpressionChangedAfterItHasBeenCheckedErrorで（http://localhost:8085/templatetest/js/@angular/core/bundles/core.umd.js:1456:38） （http://localhost:8085/templatetest/js/@angular/core/bundles/core.umd.js:8078:20）

Answer 1

[コンストラクタとして]私はあなたが同じformControlName="surename1"を使用しているので、それはだと思います<custom-component>と<input>です。
同じモデルにバインドしたい場合は、ngModelを指すだけで、それぞれのコントロールを作成してください。