角度2 - カスタムバリデータでフォームの値がデフォルト値から変更されたことを確認します

Question

私のフォームにはuser.emailがあらかじめ入力されています。ユーザーがFormControlのフィールドに元の以外の値を入力した場合にのみ、編集ボタンを有効にします。カスタムバリデーターでこれを行うことは可能ですか？

これは私のバリデータです：

import { FormControl } from '@angular/forms'; 

export class ChangedValidator { 
    static isValid(control: FormControl): any { 
    let initialValue = (' ' + control.value).slice(1); 

    if(initialValue === control.value){ 
      return { 
       "changed": true 
      }; 
     } 
     return null; 
    } 
} 

意図はFormControl.valueのクローンを作成することでしたが、私は、このクラスは値がFormControlに変更されるたびにインスタンス化されることを実現しています。

再利用不可能なコードを書き込む1つの方法は、データを格納するデータproviderからuser.emailを取得し、それをFormControl.valueと比較することです。あなたが推測するかもしれませんが、バリデーターはUserオブジェクトのパラメーターだけで動作します。

フォームの現在の値が初期化された値と異なるかどうかを確認する汎用Validatorを書きたいと思います。

編集：

これはpristineでそれを行う方法があるが、それは完璧ではありません。

import { FormControl } from '@angular/forms'; 

export class ChangedValidator { 
    static isValid(control: FormControl): any { 

    if(control.pristine){ 
      return { 
       "unchanged": true 
      }; 
     } 
     return null; 
    } 
} 

Answer 1

コントロールが元の状態ではなく、初期値から変更されていることを確認する必要がある場合は、以下のように、それはその初期値に戻すことができ、あなたがエラーをしたくない、次のようにあなたが検証機能を実装することができます：quick and dirty object checkと答えはcustom validators with parametersにすでにあったということです

static isValid = (initialValue: any): any => { 
    return(control: FormControl) => { 
    console.log(control.value); 

    if(JSON.stringify(initialValue) !== JSON.stringify(control.value)) { 
     return { 
       "changed": true 
      }; 
    } 
    return null; 
    } 
} 

注意custom validation as a function factoryの説明がありますが、詳細は少し薄いです。

forbiddenNamevalidatorファクトリは、コンフィグレーションされたバリデータ 関数を返します。この関数はAngularコントロールオブジェクトを受け取り、制御値が有効な場合は を返し、検証値が の場合はnullを返します。検証エラーオブジェクトには通常、 という名前が検証キー（ 'forbiddenName'）であり、その値が メッセージ（{name}）に挿入できる値の 値の任意の辞書であるプロパティがあります。 `pristine`が十分でない場合は

はここplayground