角度フォームコントロールとNGModelは混合しない

新しい発見
代わりにngmodelを使用してください!

角度NGModel検証

ジョンピーターズ・ Sep 24 ' 20・ 1分読む

#angular #ngmodel #validation

角度によると、discussing the ngModel and FormControls.
NGModelとFormControlは混ざらない

Use with ngModel is deprecated
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and is scheduled for removal in a future version of Angular.

フォールアウト
これは、入力要素のパイプ(HTML側)の使用はもはや動作しないことを意味します.Stackoverflowのほとんどのコンテンツは、一緒に2つを使用して例のトンを示していない、それをしないでください.
でもどうして?
私は彼らの内部の建築議論を知らないが、不変の建築の波が保たれることを期待します.
フォームコントロールを使用する場合、我々はimmutabilityパターンに移動されている.我々はかつてバインドのために使用されるモデルはFormControlに置き換えられます.モデル自体は、起動時に1回、特定のワークフローで2回だけ設定されることになります.
変更可能なモデルアーキテクチャは現在の角度のアーキテクチャ傾向の外側にある.
解決策は?
パイプは良いアイディアでしたので、別のコンポーネントに対して妥当性検査やフォーマット化を制御することができました.本当に、FormControlはその機能のいくつかを重ねました.しかし、フォームコントロールを使っているなら、パイプをバイパスする能力があります.
フォームコントロールの変更ハンドラ
文字列値として入力されたSSN番号を持つ入力要素を想定します.このモデルは有効な数値であるが、ディスプレイには数字のダッシュが表示される.

111
111-
111-22
111-22-3
111-22-3333

//or 

###-##-####

//model only winds up as
11122333
// or a semaphore such as 
0, -1, 999

パイプ交換

this.formGroup
  .controls.ssn.valueChanges
  .subscribe((value) => { 
     // do something with every change
     // no keyup event handlers needed 
}

イベントハンドラーは、表示されているデータの検証および変更を担当します.一方、モデルは、変更を永続化するために使用され、有効な場合のみ!
ワークフロー
-セマフォに基づいたハッシュタグを使ってフォームコントロールを初期化します.

すべてのFormControl変更はパイプが行ったのと同じことをしますが、コントロールの変更ごとにフックされます.

形式制御値は、すべてが有効であるとき、値が変化するとき、SSN番号をフォーマットするために変えられます、モデルは更新されます.

チップ
次のように、変更イベントハンドラでスタックオーバーフロー問題を回避します.

if (newFormat === change) return;
this.formGroup
  .controls.ssn
  .setValue(newFormat);

我々のnewFormatはユーザ・タイプとしてダッシュを挿入します.問題は、setValueを使用するたびに、私たちは別の変更をオフに発射することです!我々は死の螺旋を止めなければならなくて、一度だけ新しいフォーマットをセットしなければなりません.newformatが変更と同じであるならば、戻ります!