validation समाप्ति तिथि> कोणीय सामग्री में स्टार्टडेट



datepicker angular-material (1)

मैं कोणीय में एक घटक ( html , css , spec.ts , ts ) का निर्माण कर रहा हूं जिसमें मैं हमेशा spec.ts मैंने इस लिंक का पालन किया है https://material.angular.io/components/datepicker/overview क्रम में एकाधिक datepickers करें

यह है 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() फॉर्म validateForm() कोड जिसे मैंने ts में उपयोग किया है:

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

    });
  } 

मुझे पूरा यकीन है कि मुझे validateForm() कोड में कुछ बदलाव करना पड़ता है लेकिन मुझे यकीन नहीं है कि मुझे कौन सी परिवर्तन करना है।


चूंकि आप प्रतिक्रियाशील रूप और टेम्पलेट संचालित के मिश्रण के साथ जा रहे हैं, मैं पूरी तरह से एक प्रतिक्रियाशील रूप चुनना होगा। कार्यान्वयन मान्यकरण भी मेरी राय में आसान और क्लीनर है। यह भी इसका अर्थ भी है, आप ngModel पूरी तरह से छोड़ सकते हैं, जिसे मैं दृढ़ता से ngModel , क्योंकि इससे अप्रत्याशित मुद्दे दो बाइंडिंग (फार्म नियंत्रण और एनजीएमोडेल) हो सकते हैं।

तो अपना फ़ॉर्म बनाएं और एक कस्टम सत्यापनकर्ता को जोड़ें। यदि आपके पास एक बड़ा फार्म है, तो मैं कस्टम तिथियों को आपके तिथियों के नेस्टेड समूह को संलग्न करूँगा, क्योंकि यह इस उदाहरण में बैठता है, जब भी फॉर्म में कोई परिवर्तन होता है, तो मान्यकर्ता फ़ायरिंग कर रहा है, इससे कोई फर्क नहीं पड़ता कि यह दिनांक है खेतों, या कुछ अन्य फ़ील्ड

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

यदि आप बाद के चरण में चर unavailability लिए अपने मूल्य प्राप्त कर रहे हैं, तो आप अपने फॉर्म नियंत्रणों में मूल्यों को असाइन करने के लिए setValue patchValue या setValue patchValue उपयोग कर सकते हैं:

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">

यहां आपके लिए एक डेमो है :)