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

かんだん

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

2つのフィールドを持つフォームがあります。1つはカスタムコンポーネントで、もう1つはngmodelを介して同じフィールドにリンクされたコンポーネント(入力フィールド)です。

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

これはコードです:

<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();を使用すると解決します。しかし、これを開発に使用することはできません

****エラー(Chrome出力)

core.umd.js:5995例外:./ MFormComponentクラスMFormComponentのエラー-インラインテンプレート:55:117原因:チェック後に式が変更されました。以前の値: 'surtest'。現在の値: 'surtes'。

core.umd.js:5997元の例外:チェック後に式が変更されました。以前の値: 'surtest'。現在の値: 'surtes'

ExpressionChangedAfterItHasBeenCheckedError.Error(ネイティブ)at ExpressionChangedAfterItHasBeenCheckedError.BaseError [コンストラクターとして](http:// localhost:8085/templatetest/js/@angular/core/bundles/core.umd.js:1456:38)at new ExpressionChangedAfterItHasBeenCheckedError(http :// localhost:8085 / templatetest / js / @ angular / core / bundles / core.umd.js:8078:20

GünterZöchbauer

私はあなたが同じを使用しているからだと推測するformControlName="surename1"ために<custom-component><input>
それらを同じモデルにバインドする場合は、それを指すだけでngModel、それぞれのコントロールを作成します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

anglejs 2 rc4変更検出:チェック後に式が変更されました

分類Dev

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

分類Dev

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

分類Dev

Angular2変更検出「チェック後に式が変更されました」

分類Dev

Angular2:ネストされた* ngForの結果、「チェック後に式が変更されました」

分類Dev

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

分類Dev

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

分類Dev

Angular-チェック後に式が変更されました。以前の値

分類Dev

Angular-ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。(ネストされたFormArray)

分類Dev

チェックされた後にAngular4式が変更されましたエラー

分類Dev

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

分類Dev

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

分類Dev

ngu-carousel :: ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました

分類Dev

Angular4-NG-IFの使用中に「チェック後に式が変更されました」エラー

分類Dev

エラーエラー:ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。Angular

分類Dev

「ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました」Angularのエラー

分類Dev

チェックされた後、式___が変更されました

分類Dev

*タブ作成時の角度2の場合-チェック後に式が変更されました

分類Dev

Angular2モーダルポップアップエラー「チェック後に式が変更されました」

分類Dev

Angular2モーダルポップアップエラー「チェック後に式が変更されました」

分類Dev

動的な色の変更-ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました

分類Dev

フォーム値の更新でAngular2(beta3)「チェック後に式が変更されました」

分類Dev

Angular2-双方向バインディングのエラー:チェック後に式が変更されました

分類Dev

「ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました」に直面してローダーを表示/非表示

分類Dev

角度2のマップキーによって反復中にチェックされた後、式が変更されました

分類Dev

ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。以前の値:「未定義」

分類Dev

ngIf-チェック後に式が変更されました。以前の値: 'ngIf:false'。現在の値: 'ngIf:true'

分類Dev

ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。以前の値: '未定義'例外

分類Dev

Ionic 2レンジスライダーにより、「チェック後に式の値が変更されました」エラーが発生する

Related 関連記事

  1. 1

    anglejs 2 rc4変更検出:チェック後に式が変更されました

  2. 2

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

  3. 3

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

  4. 4

    Angular2変更検出「チェック後に式が変更されました」

  5. 5

    Angular2:ネストされた* ngForの結果、「チェック後に式が変更されました」

  6. 6

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

  7. 7

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

  8. 8

    Angular-チェック後に式が変更されました。以前の値

  9. 9

    Angular-ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。(ネストされたFormArray)

  10. 10

    チェックされた後にAngular4式が変更されましたエラー

  11. 11

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

  12. 12

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

  13. 13

    ngu-carousel :: ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました

  14. 14

    Angular4-NG-IFの使用中に「チェック後に式が変更されました」エラー

  15. 15

    エラーエラー:ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。Angular

  16. 16

    「ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました」Angularのエラー

  17. 17

    チェックされた後、式___が変更されました

  18. 18

    *タブ作成時の角度2の場合-チェック後に式が変更されました

  19. 19

    Angular2モーダルポップアップエラー「チェック後に式が変更されました」

  20. 20

    Angular2モーダルポップアップエラー「チェック後に式が変更されました」

  21. 21

    動的な色の変更-ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました

  22. 22

    フォーム値の更新でAngular2(beta3)「チェック後に式が変更されました」

  23. 23

    Angular2-双方向バインディングのエラー:チェック後に式が変更されました

  24. 24

    「ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました」に直面してローダーを表示/非表示

  25. 25

    角度2のマップキーによって反復中にチェックされた後、式が変更されました

  26. 26

    ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。以前の値:「未定義」

  27. 27

    ngIf-チェック後に式が変更されました。以前の値: 'ngIf:false'。現在の値: 'ngIf:true'

  28. 28

    ExpressionChangedAfterItHasBeenCheckedError:チェック後に式が変更されました。以前の値: '未定義'例外

  29. 29

    Ionic 2レンジスライダーにより、「チェック後に式の値が変更されました」エラーが発生する

ホットタグ

アーカイブ