validation - إندديت> ستارتات في المواد الزاوي



datepicker angular-material (1)

أنا بناء مكون ( html ، spec.ts ، spec.ts ، ts ) في الزاوي الذي أريد دائما endDate > startDate . لقد تابعت هذا الرابط https://material.angular.io/components/datepicker/overview من أجل جعل ديتيبيكرز متعددة.

هذا هو html التي استخدمتها ل ستارتات وإنهاء.

تاريخ البدء:

<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
   <mat-form-field>
      <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>
   </mat-form-field>
</div>

تاريخ الانتهاء:

<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
   <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
</div>

رمز validateForm() الذي استخدمته في ts هو:

  validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
      'startDate': [''],
      'endDate': ['']

    });
  } 

أنا متأكد من أن علي إجراء بعض التغييرات في التعليمات البرمجية validateForm() ولكن أنا لست متأكدا من التغييرات التي يجب القيام بها.


منذ يبدو أنك ذاهب مع مزيج من شكل رد الفعل وقالب مدفوعة، وأود أن اختيار شكل رد الفعل تماما. تنفيذ التحقق من الصحة هو أيضا في رأيي أسهل ونظافة. وهذا يعني أيضا ثم، يمكنك إسقاط ngModel تماما، والتي أود أن أقترح بقوة، لأنه يمكن أن يسبب مشاكل غير متوقعة أن يكون اثنين من الارتباطات (عنصر تحكم و نغموديل).

لذا قم ببناء النموذج الخاص بك وقم بإرفاق أداة مصادقة مخصصة. في حال كان لديك نموذج كبير، أود إرفاق أداة المصادقة المخصصة إلى مجموعة متداخلة من التواريخ، كما هو موجود في هذا المثال، يتم تشغيل أداة المصادقة كلما كان هناك أي تغيير في النموذج، لا يهم إذا كان التاريخ الحقول، أو بعض المجالات الأخرى.

constructor(private formBuilder: FormBuilder) { 
  this.unavailabilityForm = this.formBuilder.group({
    'startDate': [''],
    'endDate': ['']
  }, {validator: this.checkDates});  
}

إذا كنت تحصل على القيم الخاصة بك unavailability متغير في مرحلة لاحقة، يمكنك استخدام patchValue أو setValue لتعيين القيم إلى عناصر تحكم النموذج الخاص بك:

this.unavailabilityForm.setValue({
  startDate: this.unavailability.startDate;
  endDate: this.unavailability.endDate;
})

يتحقق المصادق المخصص ببساطة من أن تاريخ الانتهاء هو تاريخ لاحق من تاريخ البدء ويعود بلاغا إذا كان صالحا، أو بعد ذلك خطأ مخصص في التحقق من الصحة:

checkDates(group: FormGroup) {
  if(group.controls.endDate.value < group.controls.startDate.value) {
    return { notValid:true }
  }
  return null;
}

ومن ثم يمكنك عرض هذا الخطأ المخصص في القالب مع:

<small *ngIf="unavailabilityForm.hasError('notValid')">Not valid</small>

تذكر أيضا وضع علامة على هذه المجموعة في علامة النموذج:

<form [formGroup]="unavailabilityForm">

وهنا ديمو بالنسبة لك :)