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

Question

textareaコンポーネントの表示設定を2回目にすると、タイトルに記載されているエラーがスローされます。ここ は、問題を実証するplunkerです：https://plnkr.co/edit/jW4KXfsI7WLgQxI1ne0r?p=preview 問題のあるコンポーネントのコード：

import {Component, OnInit, ElementRef, ViewChild, Input, forwardRef, ChangeDetectorRef} from "@angular/core"; 
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"; 

const noop =() => { 
}; 

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

@Component({ 
    selector: 'app-textarea', 
    templateUrl: './textarea.component.html', 
    styleUrls: ['./textarea.component.scss'], 
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] 
}) 
export class TextareaComponent implements OnInit, ControlValueAccessor { 

    private _value = ''; 
    private _defaultLimit: number = 200; 
    @Input('charLimit') 
    private _charLimit: number; 
    @Input('lineLimit') 
    private _lineLimit:number; 
    @Input('doLimitChar') 
    private _doLimitChar: boolean = true; 
    @ViewChild('storyText') 
    private _textAreaElement: ElementRef; 
    private _disabled: boolean = false; 
    /** Callback registered via registerOnTouched (ControlValueAccessor) */ 
    private _onTouchedCallback:() => void = noop; 
    /** Callback registered via registerOnChange (ControlValueAccessor) */ 
    private _onChangeCallback: (_: any) => void = noop; 

    constructor(private _crf:ChangeDetectorRef) { 
    } 

    ngOnInit() { 
    this._charLimit = this._charLimit || this._defaultLimit; 
    } 

    get value():any { 
    return this._value; 
    } 

    set value(v: any) { 
    if (!v) v = ""; 
    if (this._doLimitChar) { 
     v = v.substring(0, this._charLimit); 
    } 
    this._value = v; 
    this._textAreaElement.nativeElement.value = v; 
    this._onChangeCallback(v); 
    } 

    // get empty() { 
    // return (this.value == null || this.value === '') 
    // } 
    // 
    // get charCount(): number { 
    // return this.empty ? 0 : ('' + this.value).length; 
    // } 

    get remainingCharacterCount(): number { 
    return this._charLimit - this.value.length; 
    } 

    get linesNumber():number { 
    return this.value.split('\n').length; 
    } 

    /** Implemented as part of ControlValueAccessor. */ 
    writeValue(value: any) { 
    this.value = value; 
    } 

    /** Implemented as part of ControlValueAccessor. */ 
    registerOnChange(fn: any) { 
    this._onChangeCallback = fn; 
    } 

    /** Implemented as part of ControlValueAccessor. */ 
    registerOnTouched(fn: any) { 
    this._onTouchedCallback = fn; 
    } 

    /** Implemented as a part of ControlValueAccessor. */ 
    setDisabledState(isDisabled: boolean) { 
    this._disabled = isDisabled; 
    } 

} 

Answer 1

私は正確にエラーの原因を知っているが、detectChanges()修正、それを

toggleTldr() { 
    this.isTldrVisible = !this.isTldrVisible; 
    this.crf.detectChanges(); 
    } 

Plunker example

はありませんmarkForCheck()との違いは、すぐに変更検出を実行するのはdetectChanges()です。

私は、テンプレート駆動型（ngModel）と反応型（FormBuilder）を混在させることが根本原因だと思います。