ExpressionChangedAfterItHasBeenCheckedError

を引き起こし検証私は次のバリデータメソッドを持っています。ExpressionChangedAfterItHasBeenCheckedError

static emptyControl(control: FormControl): any { 

    if (!control.value || control.value=="") { 
     return { 
     message: "must not be empty" 
     }; 
    } 

    return null; 

    }

私は、フォームのコントロールでこれを使用すると、私はエラーを取得する：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'null'.私が代わりにヌルのエラーを返す場合は、エラーが消えます。

最初に入力を初期化されていない変数にバインドしてから、ngOnInitで非同期呼び出しを行い、返された値をsubscribe内のこの変数に代入します。

空のフィールドまたは未設定のフィールドを検証する正しい方法は何ですか？

出典

2017-12-26 aycanadal

：

<div *ngIf="someFormGroup.hasError('required', 'text') && someFormGroup.controls.text.dirty"> <label class="errorMessage"> Field is required! </label> </div> <form [formGroup]="someFormGroup"> <input name="text" formControlName="text" /> </form>

TSをあなたは空をチェックするので、vあなたは角度変化の検出が適用される前でも変更されています。「空のフィールドをチェックするためにこれを行う必要があります。」 –

Angularはフォームバリデーターに組み込まれていますが、Requiredは基本的に空ではありません。 https://angular.io/api/forms/RequiredValidator – Zuriel

は、組み込みバリデーターを試しました。同じエラーが2回発生します。 – aycanadal

テンプレート駆動型と反応型を混合しています。どちらかを選択してください。 2つのバインディングngModelとformControlを持つことは、このような望ましくない動作を何度か持ちます。

ngModelではなくフォームコントロールに値を設定してください。つまり、ngModelを完全に削除してください。あなたは後の時点で値を設定したい場合は、setValueを使用します。

this.someFormGroup.get('text').setValue('foo')

また、テンプレートからいずれかの検証を削除し、そのテンプレートからrequiredを削除し、代わりにあなたが反応するフォームを使用しているので、Validators.requiredを使用しています。また、コメントに記載されているように、Validators.requiredが好きなので、ここでカスタムバリデーターは必要ありません。

にテンプレート変更します。私はintalizedコンポーネントが空で推測し、その値が追加され、

ngOnInit() { 
    this.someFormGroup = new FormGroup({ 
    text: new FormControl('', [Validators.required]) 
    }) 
}

あなたStackBlitz

出典

2017-12-27 09:47:13 Alex

ExpressionChangedAfterItHasBeenCheckedError

答えて

関連する問題