年齢が18歳以上で、反応性反応形式の場合

Question

ユーザーが18歳以上であることを確認する方法は、角型バリデータを使用して生年月日を入力したかどうかを確認する方法がありますか？

私のフォームは次のようになります。上記の条件は、バリで満たされている場合は、ボタンになるので

if (this.authType === 'register') { 
    this.authForm.addControl('year', new FormControl('', [Validators.required, Validators.maxLength(4), Validators.minLength(4)])); 
    this.authForm.addControl('month', new FormControl('', [Validators.required, Validators.maxLength(2)])); 
    this.authForm.addControl('day', new FormControl('', [Validators.required, Validators.maxLength(2)])); 
} 

：

<form [formGroup]="authForm" (ngSubmit)="submitForm()"> 
    <label>Date of birth</label> 
    <input formControlName="day" maxlength="2" placeholder="DD" type="text" /> 
    <input formControlName="month" maxlength="2" placeholder="MM" type="text" /> 
    <input formControlName="year" maxlength="4" placeholder="YYYY" type="text" /> 
    <button [disabled]="!authForm.valid" type="submit"> Check age </button> 
</form> 

そして、私はTSファイルに設定され、これらのバリデータを持っています有効になりました。しかし、入力した日付が有効になる前に18歳以上であることを確認する必要もあります。日付は3つの入力（dd、mm、yyyy）で入力されるので、これは難しいようです。この場合、入力日付タグは使用できません。任意の提案やコメントをいただければ幸いです。ありがとう！

P.S. MomentJSの使用に関するすべての提案に感謝します。私はすでにアプリのどこか他の場所で使っていますので、ここでも使用します。

Answer 1

この場合、完全なFormGroupにフックされるカスタムバリデータを設定する必要があります。 momentjsベースのアプローチは、次のようになります。

export class DateEditComponent { 
    authForm: FormGroup; 

    constructor(private _fb: FormBuilder) { 
    this.authForm = this._fb.group({}); 
    this.authForm.addControl('year', new FormControl('', [Validators.required, Validators.maxLength(4), Validators.minLength(4)])); 
    this.authForm.addControl('month', new FormControl('', [Validators.required, Validators.maxLength(2)])); 
    this.authForm.addControl('day', new FormControl('', [Validators.required, Validators.maxLength(2)])); 
    this.authForm.setValidators(this.minimumAge(18)); 
    } 

    private minimumAge(age: number): ValidatorFn { 
    return (fg: FormGroup): ValidationErrors => { 
     let result: ValidationErrors = null; 
     if (fg.get('year').valid && fg.get('month').valid && fg.get('day').valid) { 
     // carefull, moment months range is from 0 to 11 
     const value: { year: string, month: string, day: string } = fg.value; 
     const date = moment({ year: +value.year, month: (+value.month) - 1, day: +value.day }).startOf('day'); 
     if (date.isValid()) { 
      // https://momentjs.com/docs/#/displaying/difference/ 
      const now = moment().startOf('day'); 
      const yearsDiff = date.diff(now, 'years'); 
      if (yearsDiff > -age) { 
      result = { 
       'minimumAge': { 
       'requiredAge': age, 
       'actualAge': yearsDiff 
       } 
      }; 
      } 
     } 
     } 
     return result; 
    }; 
    } 
} 

をライブたとえば、この場合、Imは単数入力フィールドに任意の形式/範囲の検証の世話をしていないことをhere

お知らせをご確認ください。

Answer 2

いいえ、カスタムバリデーターを作成する必要があります。このバリデーターは、3つの入力値のいずれかが変更されたときに検証を実行する必要があるため、単一のFormControlではなくFormGroup全体に配置する必要があります。

バリデーションをどのように実装するかは、日付が関係するのであなた次第ですが、私は常にdatejを使用して日付を扱います。