web-dev-qa-db-ja.com

Angular form validation：2つのフィールドを比較します

Angular 4アプリケーションでは、比較を行うフォームの2つのフィールドを検証するにはどうすればよいですか？

たとえば、フォームにstartDateとendDateの日付フィールドがあり、endDateがstartDateよりも大きいことを確認したいとします。

formsangularvalidationangular-formsangular-validation
6
Francesco Borzi

1つまたは複数の兄弟（フォーム）コントロールを含む検証を実装する場合は、兄弟コントロールのレベルより上または上のレベルで検証関数を定義する必要があります。例：

_ngOnInit() {
 this.form = this.formbuilder.group({
  'startDate' = ['', [<control-specific-validations>]],
  'endDate' = ['', [<control-specific-validations>]]
 }, { validator: checkIfEndDateAfterStartDate }
 });
}
_

次に、コンポーネントクラスの定義の外側（同じファイル内）で、関数checkIfEndDateAfterStartDateも定義します。

_export function checkIfEndDateAfterStartDate (c: AbstractControl) {
 //safety check
 if (!c.get('startDate').value || !c.get('endDate').value) { return null }
 // carry out the actual date checks here for is-endDate-after-startDate
 // if valid, return null,
 // if invalid, return an error object (any arbitrary name), like, return { invalidEndDate: true }
 // make sure it always returns a 'null' for valid or non-relevant cases, and a 'non-null' object for when an error should be raised on the formGroup
}
_

この検証では、エラーフラグ（ここではFormGroup）をinvalidEndDateのtrueのエラーオブジェクトに追加することにより、FormGroupを無効にします。代わりに兄弟コントロールのいずれかに特定のエラーを設定する場合は、c.get('endDate').setErrors({ invalidEndDate: true })のようなものを使用して、そのformControlにエラーフラグを手動で設定できます。これを行う場合は、エラーをnullにc.get('endDate').setErrors(null)のように設定して、有効なケースであるかどうかを確認してください。

同様の検証のライブデモを見ることができます here 。

15
amal

これを試して

export class validationComponent implements OnInit {
     private testForm:FormGroup;

     constructor(private fb: FormBuilder) {

     }

     ngOnInit() {
         this.testForm = this.fb.group({
           'startDate': ['', [Validators.required]],
           'endDate': ['', [Validators.required]]
        });

       this.subscribeDateChanges();
    }

    subscribeDateChanges() {
        const startDateChanges = (<any>this.testForm).controls.startDate.valueChanges;
        const endDateChanges = (<any>this.testForm).controls.endDate.valueChanges;

        startDateChanges.subscribe(start => {
             this.testForm.controls['endDate'].
               setValidators(
                [Validators.required,
                CustomValidators.minDate(this.toYYYYMMDD(start))]);
        this.validateDates();
       });

       endDateChanges.subscribe(end => {
               this.validateDates();
         });
     }

   dateError: boolean = false;
   validateDates(): void{
       let startDate = this.testForm.controls['startDate'].value;
       let endDate = this.testForm.controls['endDate'].value;
       if(endDate && startDate){
           this.dateError = endDate <= startDate;
        }
    }

   toYYYYMMDD(d:Date): string {
       d = new Date(d)
       var yyyy = d.getFullYear().toString();
       var mm = (d.getMonth() + 101).toString().slice(-2);
       var dd = (d.getDate() + 100).toString().slice(-2);
       return yyyy + '-' +  mm + '-'  + dd;
   }

dateErrorブール値に基づいて、エラーメッセージを表示します

0
Robert