角度のあるリアクティブフォーム-ユーザーがUIの変更を元の値に戻すと、元の状態がリセットされますか？

Question

フォームの入力が変更された場合にのみ、フォームの[送信]ボタンを有効にしたい。

フォームコントロールの値を変更しない場合は、[送信]ボタンを無効にする必要があります。

[送信]ボタンの有効化/無効化にFormGroup.pristineフラグを使用しようとしました。

ボタンを有効にすると問題なく動作します。

ただし、trueUIの値が元の値に戻されてもリセットされません。

コンポーネントコード：

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

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
  styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent {
  public registrationForm;
  public formValues = {
      gender: 1,
    };

  constructor(private formBuilder: FormBuilder) {
    this.registrationForm = formBuilder.group(this.formValues);
  }

  onSubmit(formData) {
    console.log('Your form is submitted', formData);
    this.registrationForm.reset(this.formValues);
  }
}

<form class="registration-form" [formGroup]="registrationForm" (ngSubmit)="onSubmit(registrationForm.value)">
  <div>
    <label for="gender">Gender</label>
    <select id="gender" formControlName="gender">
      <option value=1>female</option>
      <option value=2>male</option>
      <option value=3>do not specify</option>
    </select>
  </div>
  <input type="submit" [disabled]="registrationForm.pristine">
</form>

デフォルトでは、オプション「女性」が選択ボックスで選択されています。

たとえば、ユーザーが「男性」に変更すると、[送信]ボタンが有効になります。

これで、ユーザーが「女性」を再度選択しても、「送信」ボタンは無効になりません。

元の状態に戻してボタンを無効にするには、ユーザーは[送信]ボタンをクリックする必要があります。

ユーザーが[送信]ボタンをクリックせずに選択ボックスの値をデフォルトに戻したときに、元の状態にリセットするにはどうすればよいですか？

Angularバージョン：8.2.14。

更新

ユーザーがUIをデフォルト値に変更しても、残念ながら角度はフォームのステータスを元の状態に変更しないようです。

したがって、データ比較を実行し、フォームを元の状態にマークするコードを作成する必要があります。

Answer 1

次のようにデータがdefaultValueに戻ったときに、markAsPristineメソッドを使用して元のステータスをtrueに設定できます。

ngOnInit() {
    const defaultValue = this.registrationForm.value;
    this.registrationForm.valueChanges
      .pipe(debounceTime(200))
      .subscribe(value => {
        if (JSON.stringify(defaultValue) == JSON.stringify(value)) {
          this.registrationForm.markAsPristine();
        }
      });
  }

Answer 2

何も変更されていない場合に送信ボタンを無効にするためにtrueまたはfalseを返す1つのメソッドを作成できます。

フォームの入力を格納するために使用されるオブジェクトがあると仮定します。

関数については、以下のコードを参照してください。

oldObj = _.cloneDeep(this.obj)
dataChanged(){
 return !_.isEqual(this.oldObj, this.obj)
}

そしてhtmlに以下の行を追加します

<input type="submit" [disabled]="!hasChanged()">