web-dev-qa-db-ja.com

フォーム内のデータが変更されたかどうかを検出する

私はAngular form（reactiveではない）、ngModelでバインドされたデータを持っています：

 <form #form="ngForm">
  <input [(ngModel)]="user.name">
  <input [(ngModel)]="user.color">

  <button type="submit">Save</button>
 </form>

バインドされたデータが変更されていない場合、送信ボタンを無効にするにはどうすればよいですか？

angulartypescriptangular-forms
11
Vladimir Humeniuk

これを実行し、ダーティフラグをチェックします。これは、フォームがダーティかどうかを示します

 <button type="submit"  [disabled]="!form.dirty">Save</button>

フォームの値を変更すると、フォームが汚れます。

詳細はこちらをご覧ください： https://angular.io/guide/formsenter image description here

12
Pranay Rana

あなたのコメントによれば、「しかし、入力の1つのシンボルを消去してから再び書き直した場合（値は同じですが、フォームが変更されました）？」この解決策をお勧めします。

一般的な考え方は、フォームの初期値を個別のオブジェクトとして保存することです（複製するだけです）。次に、単にキーと値を反復処理し、更新されたデータと初期データを比較するブール関数を作成します。この後、この関数の結果を送信ボタン[disabled]="yourCheckMethod(form.value) "にバインドするだけです。

1
shohrukh

次のような初期状態のプロパティで試すことができます：

<button type="submit" [disabled]="form.pristine">Save</button>

このプロパティは、フォームがロードされてから変更されたかどうかを確認します。

0
ochs.tobi