2017-10-13 13 views
0

自動テストでは、4角形を記入したいと思います。しかし、提出後、Angularは変更を認識していません。jQueryを使用してAngular4フォームを塗りつぶし

フォームビルダーとフォームコントロールを使用するフォームがあります。

アプリケーション以外では、私はいくつかの自動テストを行う必要があります。したがって、フォーム$('#firstName').val('John');を記入してフォームを送信しようとすると、Angularはフォームの前の値を返し、その変更を検出しません。

は、私は、複数の解決策を試してみましたが、何もngZone

  • が変更イベントで遊んで遊んでフォーム送信
  • this.form.updateValueAndValidity()
    • ラン変化検出のように動作しません

    私が持っていますAngularがフォーム上で私の変更を検出するように強制することはできません。

    UPDATEのHTML

    <input type="text" class="input-event" name="firstName" id="firstName" placeholder="First Name" [formControlName]="formFieldNames.firstName" /> 
    

    UPDATE 2

    はここに例を示しますhttps://run.plnkr.co/sqseg6kObDICjdEa/

    あなたには、いくつかのデータを使用してフォームを記入し、提出する場合は、コンソールの右のデータを取得します。

    さて、あなたはコンソールでdocument.getElementById('fullname').value = 'Jean';

    を入れて、再提出する場合は、その角度がデータを更新しなかったでしょう、と私はそれを作ることができる方法を知っていただきたいと思います。

  • +0

    あなたはhtmlページも投稿できます –

    +0

    投稿を更新しました。ご覧のとおり、通常のHTML –

    +0

    では、コンポーネントtsクラスの値を 'thisとして取得できます。 formFieldNames.controls ['firstName'] 'jqueryをchhoseする条件を確認できません。また、要素をパックしてデータを取得するために使用できる 'ElementRef'があります。 –

    答えて

    0

    core javascript element pickerまたはjQuery element selectorのように、角度のない参照でangle conponentの値にアクセスしようとしています。角度以外の値を入力した後は、角度ライフサイクルのデータを更新する必要があります。

    これは、NgZoneを使用して多くの手作業を行うことで可能です。私が試したことはありませんが、あなたが従うことができる文書はhereです。

    角はOnInitのようなライフサイクルを持ち、厳密にそれに従います。たとえば、@Inputのフィールド値は、コンストラクタではなくngOnInit()で使用できます。だからchangeDetectionStrategyが重要な役割を果たします。これらのイベント(のようなmouse overkeypress、など)でないとして

    ですから、browsr開発者ツールから$('#firstName').val('John');またはdocument.getElementById('fullname').value = 'Jean';を実行すると、変化検出戦略は、それらを検出しませんでした。しかし、あなたがその分野で何かを書くなら、角度はそれらを検出し、モデルを更新します

    あなたの質問に答えることを願っています。

    関連する問題