11

を介してプログラムでインスタンス化されているフォームがありますDynamicComponentLoader::loadIntoLocation。フォームコードは以下です。

constructor (
    private _builder: FormBuilder
) {
    this.editForm = _builder.group({
        name: ['', Validators.required],
        email: ['', Validators.compose([Validators.required, Helpers.emailValidator])],
        phone: [''],
        phoneAlt: [''],
        location: [''],
        dob: [''],
        bio: [''],
    });
}

一部のフォームにはバリデータがないことに気付くでしょう (私が知る限り、これは を使用する場合と同じValidators.nullValidatorです。両方でテストしました)。

私のテンプレートには、次のコードがあります(コントロールごとに):

<label for="phone">Contact Number <span *ngIf="!phone.valid">- {{e(phone)}}</span></label>
<input type="text" name="phone" id="phone" ngControl="phone" #phone="ngForm">

バリデーターを持たない最初のコントロール!phone.validは、テンプレートの一部にヒットすると、次の例外を 2 回スローします。

EXCEPTION: Expression '!phone.valid in e@15:43' has changed after it was checked. Previous value: 'true'. Current value: 'false' in [!phone.valid in e@15:43]

コントロールに触れたりthis.editForm、最初の作成後に触れたりすることはないので、私のコードに関する限り、何も変更する必要はありません。

呼び出すことでエラーを抑制できることは承知していenableProdMode()ますが、問題を非表示にするよりも問題を修正したいと考えています。

編集 (2 月 8 日):モーダルの内容を別のページに移動しようとしましたが、エラーは解決しません。これは、問題がモーダルを作成およびロードする方法に関連しているのではなく、ControlGroup または FormBuilder に関連していることを示唆しています。

問題のプランカー| モーダルなしのプランカー

4

3 に答える 3

11

Angular Gitterチャットでこれを解決してくれたqdoubleに感謝します。

この問題は、angular がページを解析した順序が原因であると思われました。上から下に移動することにより、初期化ngIf="!phone.valid"される前に解析されphone.validていました。これは、if ステートメントに catch を追加して null でないことを確認する*ngIf="phone.valid === null ? false : !phone.valid"(または入力の後にラベルを移動する) ことで簡単に修正できました。

于 2016-02-08T17:41:22.120 に答える