反応的なフォームの変化角度2

Question

私は変化を検出したい反応的なフォームを持っています。たとえば、ユーザーが製品を表示すると、「製品の表示」ページが開き、すべてのフォーム・フィールドにその製品の詳細が記入されます。フォームの値が変更された場合は、「保存」ボタンを有効にしたい（デフォルトでは無効になっている）。ただし、ユーザーが変更を元に戻すか、読み込んだ内容に戻すと、[保存]ボタンは再び無効になります。

これは可能ですか？私は角がフォームの変化を検出してフォームを「汚い」ようにする人もいますが、フォームが汚れてしまうと状態を元の状態に戻すのは簡単でも直感的でもありません。また、初期の製品の詳細をローカルストレージにロードし、現在の状態のフォーム値JSONとローカルストレージJSONを比較し、それに基づいてボタンを有効/無効にする方法についても説明しました。誰かが、より良い、またはより良い方法を持っていますか？

おかげ

Answer 1

初期データが到着すると、コンポーネントのプロパティとしてローカルに保存します。 これをフォームの現在の値といつでも比較して、変更があったかどうかを判断できます。

あなたが必要があります：

• initValues、（ユーザとの対話の前に）開始フォーム値をテンプレート内のボタンにバインドされ

• disableSaveBtn:booleanプロパティ：[disabled]="disableSaveBtn"

• valuesMatch(val1,val2):booleanフォームの2つのモデルを比較し、一致する場合はtrueを返す関数

フォームの値が変更されるたびに比較を行います。あなたが反応性のフォームを使用しているので、あなただけのvalueChanges、観察

// will emit every time a form control value is changed 
this.form.valueChanges.subscribe(newValues => { 
    // disable the button if new value matches initial value 
    this.disableSaveBtn = this.valuesMatch(newValues, initValues) 
})