0

Hope I can get some advice here. I have a Angular Formly search form to search for client. The way of how the search form work is if ID is filled then 'surname' and 'date of birth' are not needed and vice versa. so i am doing a validator to check

  1. if all three fields are empty OR
  2. if ID is filled then surname and dob is not needed to be filled OR
  3. if surname && dob are filled then ID is not needed to be filled

I tried to use Formly two fields matchings but didnt work (checked in break point even the condition was right, it still said my form is invalid and cannot send the value to backend) https://formly.dev/docs/examples/validation/matching-two-fields So i tried to write the validation inside my component but i do not know how to pass the value of other fields to target fields e.g. in the SurnameValidator that i put in the dob' how do i pass the value of surname into it? The follwoing is my code at the moment

component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormGroup } from '@angular/forms';

import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';

import { format } from 'date-fns';
import { Subscription } from 'rxjs';

 export function SurnameValidator(control: AbstractControl) {
  if (!control.value) {
    return { checking: { message: 'please fill in surname ' } };
  }
// want to write a condition to check if(clientID){
   return null
 } but do not know how to pass client ID value
}

export function DobValidator(control: AbstractControl) {
  if (!control.value) {
    return { checking: { message: 'please fill in dob' } };
  }
}

@Component({
  selector: 'app-patient-search',
  templateUrl: './patient-search.component.html',
  styleUrls: ['./patient-search.component.scss'],
})
export class PatientSearchComponent implements OnInit, OnDestroy {
  constructor(private patientSearchService: PatientSearchService, public utilService: UtilService) {}

  panelOpenState = false;

  private subs = new Subscription();
  searchForm = new FormGroup({});
  searchModel: any = { surname: '' };
  searchOptions: FormlyFormOptions = {};
  fields: FormlyFieldConfig[] = [
    {
      fieldGroupClassName: 'row justify-content-center',

      props: {
        label: 'Input',
        placeholder: 'Placeholder',
        description: 'Description',
        required: true,
      },
      fieldGroup: [
        {
          className: 'text-center col-4 p-2',
          
          },
          fieldGroup: [
            {
              className: '',
              key: 'clientID',
              type: 'input',
              focus: true,

              props: {
                label: 'Client ID',
              },
              
            },
            {
              className: '',
              key: 'surname',
              type: 'input',
              modelOptions: {
                updateOn: 'change',
              },
              props: {
                label: 'Surname',
              },
              validators: {
                validation: [DobValidator],<-- want to pass dob value into, tried this.fields.dob or searchForm.get('dob').value but didnt work
              },
            },
            {
              className: '',
              key: 'givenname',
              type: 'input',
              props: {
                label: 'Given Name',
              },
            },
            {
              className: '',
              key: 'dob',
              type: 'datepicker',

              props: {
                label: 'Datepicker',
                placeholder: 'Placeholder',
              },
              validators: {
                validation: [SurnameValidator],<-- want to pass surname value into, tried this.fields.surname or searchForm.get('surname').value but didnt work
              },
            },
          ],
        },
        {
          className: 'text-center col-4 p-2',

          fieldGroup: [
            {
              className: '',
              key: 'sex',
              type: 'select',
              props: {
                label: 'Sex',
                options: [
                  { label: 'M', value: 'M' },
                  { label: 'F', value: 'F' },
                  { label: 'U', value: 'U' },
                ],
              },
            },
            {
              className: '',
              key: 'mobilephone',
              type: 'input',
              props: {
                label: 'Mobile Phone No',
              },
            },
            
          ],
        },
      ],
    },
  ];

  ngOnInit(): void {
    this.panelOpenState = true;
  }

  

  onSubmit() {
    if (this.searchForm.valid) {
      //pass the searchForm to backend
    } else {
      alert('form is not valid')
    }
  }

  
}

HTML file

<mat-accordion>
  <mat-expansion-panel [expanded]="panelOpenState" (opened)="panelOpenState = true" (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <h2 class="ps-2">search client</h2>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
      <formly-form [model]="searchModel" [fields]="fields" [options]="searchOptions" [form]="searchForm"></formly-form>
      <div class="p-3 flex-row-end-end">
        <button mat-raised-button type="submit" class="btn btn-primary mx-2" color="primary">search</button>
        <button mat-raised-button type="button" class="btn btn-primary mx-2" color="" (click)="searchOptions.resetModel()">reset</button>
      </div>
    </form>
  </mat-expansion-panel>
</mat-accordion>

Hope to get some idea how i can pass 1 or multiple values to other fields for validation check. Thank you for any advice

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy