web-dev-qa-db-ja.com

Angular（4）での日付と通貨の検証

私はAngularを初めて使用します。 angular 4つのリアクティブフォームを使用しており、カスタム検証を実行する方法を見つけました。以下は数値の実装です

function numberValidator(c: AbstractControl): { [key: string]: boolean } | null {
    if (c.pristine) {
        return null;
    }
    if (c.value.match(/.*[^0-9].*/)) {
        return { 'numeric': true };
    }
    return null;
}

 phoneControl: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10), numberValidator]],

通貨（小数点以下2桁の有無に関係なく）と最も重要な日付フィールドの実行方法を見つけようとしています。

これが他の場所で回答されたが、angular（4）のサンプルが見つからない場合はご容赦ください

御時間ありがとうございます

angulartypescriptangular-forms
8
Vinod

どのような日付検証が必要ですか？値が有効な日付であることだけ？入力要素にtype="date"を設定すると、ブラウザは有効な日付のみが入力されるようにします。

表示されている番号検証ツールと通貨検証ツールで同じです。入力要素にtype="number"を設定できるはずで、バリデーターは必要ありません。

それでもdo独自の検証を実行する場合は、例のように正規表現を使用できます。

通貨と日付の正規表現を調べるだけです。日付については、次のようなものです。 Javascript-日付形式を検証する正規表現

11
DeborahK

これは、カスタムバリデーターを使用する別のオプションです

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

export class DateValidator {

   static ptDate(control: FormControl): { [key: string]: any } {
       let ptDatePattern =  /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g;

       if (!control.value.match(ptDatePattern))
           return { "ptDate": true };

       return null;
   }

   static usDate(control: FormControl): { [key: string]: any } {
       let usDatePattern = /^02\/(?:[01]\d|2\d)\/(?:19|20)(?:0[048]|[13579][26]|[2468][048])|(?:0[13578]|10|12)\/(?:[0-2]\d|3[01])\/(?:19|20)\d{2}|(?:0[469]|11)\/(?:[0-2]\d|30)\/(?:19|20)\d{2}|02\/(?:[0-1]\d|2[0-8])\/(?:19|20)\d{2}$/;

       if (!control.value.match(usDatePattern))
           return { "usDate": true };

       return null;
   }
}

「dd/mm/yyyy」形式の場合は次のように使用します。

this.formDetail = this.formBuilder.group({
   date: ['', DateValidator.ptDate],
});

「mm/dd/yyyy」形式の場合は次のように使用します。

this.formDetail = this.formBuilder.group({
   date: ['', DateValidator.usDate],
});

この助けを願っています！

9
EQuadrado

MM/DD/YYYYおよびMMDDYYYY形式を処理するカスタムバリデーターを作成しました

function dateValidator(c: AbstractControl): { [key: string]: boolean } | null {
    if (c.pristine) {
        return null;
    }
    if ((c.value !== undefined && c.value !== '' && c.value != null)) {

        var month = null;
        var day = null;
        var year = null;
        var currentTaxYear = Number(new Date().getFullYear() - 1);
        if (c.value.indexOf('/') > -1) {
            var res = c.value.split("/");           
            if (res.length > 1) {
                month = res[0];
                day = res[1]
                year = res[2];
            }                              
        }
        else {
            if (c.value.length == 8) {
                month = c.value.substring(0, 2);
                day = c.value.substring(2, 4);
                year = c.value.substring(4, 8);
            }            
        }
        if (isNaN(month) || isNaN(day) || isNaN(year)) {
            return { 'dateInvalid': true };
        } 
        month = Number(month);
        day = Number(day);
        year = Number(year);
        if (month < 1 || month > 12) { // check month range
            return { 'dateInvalid': true };
        }
        if (day < 1 || day > 31) {
            return { 'dateInvalid': true };
        }
        if ((month === 4 || month === 6 || month === 9 || month === 11) && day === 31) {
            return { 'dateInvalid': true };
        }
        if (month == 2) { // check for february 29th
            var isleap = (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0));
            if (day > 29 || (day === 29 && !isleap)) {
                return { 'dateInvalid': true };
            }
        }
        if (year !== currentTaxYear) {
            return { 'dateYearGreaterThanTaxYear': true };
        }
    }
    return null;
}
4
Vinod

これは私の解決策です：

import {AbstractControl} from "@angular/forms";

export class MyValidators {

  // validate MM/DD/YYYY
  static date(c: AbstractControl): { [key: string]: boolean } {
    let value = c.value;
    if (value && typeof value === "string") {
      let match = value.match(/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/);
      if (!match) {
        return {'dateInvalid': true};
      }
      let date = new Date(`${match[3]}-${match[1]}-${match[2]}`);
      if (isNaN(date.getTime())) {
        return {'dateInvalid': true};
      }
    }
    return null;
  }

}
0
user1119279

リアクティブフォームを使用している場合、カスタムバリデーターを作成できます。以下を参照してください

dateValidator(c: AbstractControl): { [key: string]: boolean } {
    let value = c.value;
    if (value && typeof value === "string") {
      let match = value.match(/^([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/);
      if (!match) {
        return { 'dateInvalid': true };
      } else if (match && match[0] !== value) {
        return { 'dateInvalid': true };
      }
    }
    return null;
  }

コントロールの作成中に、以下に示すように、このバリデーターを他のバリデーターとともに追加する必要があります。

const group = this.fb.group({
    DateType: ['', [Validators.required, this.dateValidator]],
  })
0
Ashish S

Angular Materialを使用している場合、MatDatepickerとMoment.jsの統合を使用して、次のようにFormControlを使用してカスタムの日付形式を検証できます。

https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats

HTML：

<input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">

TS：

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerFormatsExample {
  date = new FormControl(moment());
}
0
java-addict301