web-dev-qa-db-ja.com

Angular 5 Form dirty check

保存するフォームとボタンがあります。ボタンは、フォームに保存されていない変更（入力）がある場合にのみ有効にする必要があります。

<form>
    <div>
    ... (inputs)
        <span (click)="save()"> Save </span>
    </div>
</form>

Angular 5？フォームダーティチェックインの組み込みメカニズムはありますか？このシナリオを実装する最も簡単な方法は何ですか？

javascripthtmlangularangular5
7
AllmanTool

はい：リアクティブフォームのドキュメントをご覧になることを強くお勧めします。

それとは別に、組み込みのメカニズムはフォームの状態をチェックするためだけのものです：

  • touchedは、ユーザーがフォームに入力したことを意味します
  • dirty/!pristineは、ユーザーが変更を加えたことを意味します

ただし、行われた変更を処理する場合は、それを使用しないでください。ユーザー名が「foo」から「bar」に変更され、「foo」に戻る場合、フォームに変更はないため、ユーザーは上記のフォームを送信する必要はありません。

代わりに、フォームをオブジェクトの元の値と比較する関数を作成することをお勧めします。これを行う方法は次のとおりです。

// Creates a reference of your initial value
createReference(obj: any) {
  this.reference = Object.assign({}, obj);
}

// Returns true if the user has changed the value in the form
isDifferent(obj: any, prop: string) {
  return this.reference[prop] !== obj[prop];
}

submitForm(form: any) {
  // ... Business code ...
  hasChanges = false;
  for (let prop in form) {
    if (this.isDifferent(form, prop)) { hasChanges = true; }
  }
  // If no changes, cancel form submition
  if (!hasChanges) { return; }
}
11
user4676340

リアクティブフォーム（ https://angular.io/guide/reactive-forms ）を使用している場合、プロパティpristineおよびプロパティdirty onがありますフォームグループとコントロール。次のようになります。

<form form-group="myGroup">
  <div>
    <input type="text" formControlName="ctrl1">
    ... (further inputs)

    <span><button (click)="save()" [disabled]="myGroup.pristine"> Save </button></span>
  </div>
</form>

および.tsファイル：

import { Component, .... } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({...})
export class YourFancyComponent {
  myGroup: FormGroup;
  constructor(private( formBuilder: FormBuilder) {
      this.myGroup = this.formBuilder.group({
        'ctrl1': 'defValue',
        'ctrl2': 'defaultValue2'
      });
  }
}

テンプレート駆動型フォームの場合（ https://angular.io/guide/forms#track-control-state-and-validity-with-ngmodel ）に従って、変更された入力コントロールのcssクラスが変更されますng-pristineからng-dirtyに変更しますが、[保存]ボタンは役に立ちません。

7
Chris