Added compare validator

src/app/addhealthdata/addhealthdata.component.html

@@ -94,12 +94,14 @@
  </div>
  <div class="form-floating mb-3">
  <select
+ name="txtAgeMin"
+ id="txtAgeMin"
  class="form-control"
  formControlName="txtAgeMin"
  [(ngModel)]="addData.age_min"
  #txtAgeMin
- (change)="onSelectedMinAge(txtAgeMin.value)"
  >
+ <!--(change)="onSelectedMinAge(txtAgeMin.value)"-->
  <option *ngFor="let age of ages">{{ age }}</option>
  </select>
  <label for="txtAgeMin">Age Min</label>
@@ -113,12 +115,12 @@
  formControlName="txtAgeMax"
  [(ngModel)]="addData.age_max"
  #txtAgeMax
- (change)="onSelected(txtAgeMax.value)"
  >
+ <!--(change)="onSelected(txtAgeMax.value)"-->
  <option *ngFor="let age of ages">{{ age }}</option>
  </select>
  <label for="txtAgeMax">Age Max</label>
- <p class="text-danger" *ngIf="ageMaxHasError">
+ <p class="text-danger" *ngIf="myForm.hasError('invalidDateRange')">
  Max age must be greater than Min age
  </p>
  </div>

src/app/addhealthdata/addhealthdata.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
 import { IHealthData } from '../Interfaces/ihealth-data';
 import { Result, Ok, Err } from '@sniptt/monads';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { AgeCompareValidator } from '../validators/agecomparevalidator';
 @Component({
  selector: 'app-addhealthdata',
  templateUrl: './addhealthdata.component.html',
@@ -15,20 +16,25 @@ export class AddhealthdataComponent implements OnInit {
  selectedMaxAgeValue = '';
  selectedMinAgeValue = '';
  ages: Array<number> = [];
- myForm = new FormGroup({
- txtText: new FormControl(),
- txtDisplay: new FormControl(),
- txtDisplayOR: new FormControl(),
- txtDisplayHI: new FormControl(),
- txtLanguage: new FormControl(),
- txtInputType: new FormControl(),
- txtGender: new FormControl(),
- txtPosCon: new FormControl(),
- txtNegCon: new FormControl(),
- txtPPE: new FormControl(),
- txtAgeMin: new FormControl('', [Validators.required]),
- txtAgeMax: new FormControl('', [Validators.required]),
- });
+
+ myForm = new FormGroup(
+ {
+ txtText: new FormControl(),
+ txtDisplay: new FormControl(),
+ txtDisplayOR: new FormControl(),
+ txtDisplayHI: new FormControl(),
+ txtLanguage: new FormControl(),
+ txtInputType: new FormControl(),
+ txtGender: new FormControl(),
+ txtPosCon: new FormControl(),
+ txtNegCon: new FormControl(),
+ txtPPE: new FormControl(),
+ txtAgeMin: new FormControl('txtAgeMin', [Validators.required]),
+ txtAgeMax: new FormControl('txtAgeMax', [Validators.required]),
+ },
+
+ { validators: AgeCompareValidator }
+ );
 
  ageMaxHasError: boolean = false;
  ageMinHasError: boolean = false;
@@ -43,7 +49,7 @@ export class AddhealthdataComponent implements OnInit {
  this.addData.id = Math.random().toString();
  this.onSave.emit(this.addData);
  }
- onSelectedMinAge(value: string): void {
+ /* onSelectedMinAge(value: string): void {
  this.selectedMinAgeValue = value;
  if (this.selectedMaxAgeValue < this.selectedMinAgeValue) {
  this.ageMinHasError = true;
@@ -58,5 +64,5 @@ export class AddhealthdataComponent implements OnInit {
  } else {
  this.ageMaxHasError = true;
  }
- }
+ }*/
 }

src/app/edithealthdata/edithealthdata.component.html

@@ -122,7 +122,7 @@
  Max age must be greater than Min age
  </p>
  </div>
- <div class="form-floating mb-3">
+ <div class="form-floating mb-3" *ngIf="positiveCondition">
  <input
  type="text"
  class="form-control"
@@ -134,7 +134,7 @@
  />
  <label for="txtPosCon">Positive Condition</label>
  </div>
- <div class="form-floating mb-3">
+ <div class="form-floating mb-3" *ngIf="negativeCondition">
  <input
  type="text"
  class="form-control"

src/app/edithealthdata/edithealthdata.component.ts

@@ -31,14 +31,25 @@ export class EdithealthdataComponent implements OnInit {
  });
  ageMaxHasError: boolean = false;
  ageMinHasError: boolean = false;
+ positiveCondition: boolean = false;
+ negativeCondition: boolean = false;
  constructor() {
  for (var i = 1; i <= 120; i++) {
  this.ages.push(i);
  }
  }
 
  ngOnInit(): void {
- //console.log(this.healthdata);
+ // console.log(this.healthdata);
+ if (
+ this.healthdata.text.toLowerCase() == 'Associated symptoms'.toLowerCase()
+ ) {
+ this.positiveCondition = true;
+ this.negativeCondition = true;
+ } else {
+ this.positiveCondition = false;
+ this.negativeCondition = false;
+ }
  }
  onSubmit() {
  this.onEdit.emit(this.healthdata);

src/app/jsmind/jsmind.component.ts

@@ -90,6 +90,7 @@ export class JsmindComponent implements OnInit {
  alert('Please Select Node');
  return;
  }
+
  let modal = this._modalService.open(ModaladdhealthdataComponent, {
  backdrop: true,
  size: 'xl',

src/app/validators/agecomparevalidator.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+import { ValidationErrors } from '@angular/forms';
+
+export const AgeCompareValidator: ValidatorFn = (
+ control: AbstractControl
+): ValidationErrors | null => {
+ // NOTE Safety check
+ if (!control.get('txtAgeMin')?.value || !control.get('txtAgeMax')?.value) {
+ return null;
+ }
+
+ // NOTE Compare fields
+ const mStart = control.get('txtAgeMin')?.value;
+ const mEnd = control.get('txtAgeMax')?.value;
+ const isValid = parseInt(mStart) <= parseInt(mEnd);
+
+ // NOTE Invalid
+ if (!isValid) return { invalidDateRange: true };
+
+ // NOTE Valid
+ return null;
+};