Tips for validating duplicate entries in dynamically added form fields

Question

Tips for validating duplicate entries in dynamically added form fields

I have a form called verification form and a form array named RepDetails with three fields. Initially, the form displays three fields, but users can add more details by clicking on "add more". I need assistance in ensuring that Mydetails[0].name is not identical to mydetails[1].name. Can anyone provide guidance on this issue?

Myform = this.fb.group({   
    Mydetails: this.fb.array([this.createMydetails()])   
  });

createMydetails(): FormGroup {
    return this.fb.group({
      Myname: ['', Validators.required ],
      Myid: ['', Validators.required],
      Myphone: ['', Validators.required]
    });
  }

Html

<div
        formArrayName="Mydetails"
        *ngFor="let item of Mydetails.controls; let i = index"
      >
        <div [formGroupName]="i">
          <mat-form-field appearance="outline">
            <mat-label class="required">
              Name
            </mat-label>
            <input
              appAlphaNumeric
              [maxlength]="maxRepNamelen"
              formControlName="Myname"
              class="mat-body-1"
              matInput
            />
          </mat-form-field>
          <mat-form-field appearance="outline">
            <mat-label class="required">
              Id
            </mat-label>
            <input
              appAlphaNumeric
            
              formControlName="Myid"
              class="mat-body-1"
              matInput
            />
          </mat-form-field>
          <div class="phn-wrapper">
            <ngx-intl-tel-input
              [cssClass]="'int-phn'"
              [searchCountryField]="[
                SearchCountryField.Iso2,
                SearchCountryField.Name
              ]"name="phone"
              formControlName="Myphone"
            >
            </ngx-intl-tel-input>
          </div>
          <mat-icon
            *ngIf="Mydetails.length > 1"
            (click)="remove(i)"
            class="close"
            >close</mat-icon
          >
          
        </div>
      </div>
        class="add-fields"
        (click)="add()"
      >
        <mat-icon class="icon">add_circle_outline</mat-icon>
        <span class="text mat-button">
          {{"ADD MORE"}}</span
        >
      </div>

angular typescript angular-material angular-forms

Answer 1

Answer №1

In this SO you have implemented a custom validation for a FormArray. The issue with using a custom validation on a formArray is that it gets triggered whenever any value in the formArray is changed (whether it's repName, passport, or phoneName).

You can create a custom validator for a Form Control that considers other controls as well.

  checkIfUnique(index) {
    return (control: FormControl) => {
      // Try to get the form array
      // control.parent is the FormGroup, control.parent.parent is the FormArray
      const formArray =
        control.parent && control.parent.parent
          ? (control.parent.parent as FormArray)
          : null;
      if (formArray && formArray.controls.length) {
        for (let i = index - 1; i >= 0; i--) {
          if (
            (formArray.at(i) as FormGroup).get("repName").value == control.value
          )
            return { errorRepeat: true };
        }
      }
    };
  }

When creating the formGroup of the formArray, make sure to pass the "index" of the element to the validator. Therefore, you need to modify your createRep function accordingly.

// Pass the index
createRep(index:number): FormGroup {
    return this.fb.group({
      repName: ['', [Validators.required,this.checkIfUnique(index) ]],
      passport: ['', Validators.required],
      phoneNumber: ['', Validators.required]
    });
  }

Lastly, when changing the value of any 'repName', ensure to validate the rest of the controls. Angular only checks the formControl that has been changed, not the others. So we create a function for this purpose:

  checkFormArray()
  {
    this.detailsFormArray.controls.forEach(x=>{
      (x as FormGroup).get('repName').updateValueAndValidity()
    })
  }
  //I use a getter for the formArray
  get detailsFormArray() {
     return (this.verificationForm.get("repDetails") as FormArray)
  }

Invoke the function within the input tag like so:

  <input formControlName="repName" (input)="checkFormArray()">

You can view the actual implementation on StackBlitz

NOTE: I removed the angularjs tag from your question as it pertains solely to Angular.

Answer 2

In this SO you have implemented a custom validation for a FormArray. The issue with using a custom validation on a formArray is that it gets triggered whenever any value in the formArray is changed (whether it's repName, passport, or phoneName).

You can create a custom validator for a Form Control that considers other controls as well.

  checkIfUnique(index) {
    return (control: FormControl) => {
      // Try to get the form array
      // control.parent is the FormGroup, control.parent.parent is the FormArray
      const formArray =
        control.parent && control.parent.parent
          ? (control.parent.parent as FormArray)
          : null;
      if (formArray && formArray.controls.length) {
        for (let i = index - 1; i >= 0; i--) {
          if (
            (formArray.at(i) as FormGroup).get("repName").value == control.value
          )
            return { errorRepeat: true };
        }
      }
    };
  }

When creating the formGroup of the formArray, make sure to pass the "index" of the element to the validator. Therefore, you need to modify your createRep function accordingly.

// Pass the index
createRep(index:number): FormGroup {
    return this.fb.group({
      repName: ['', [Validators.required,this.checkIfUnique(index) ]],
      passport: ['', Validators.required],
      phoneNumber: ['', Validators.required]
    });
  }

Lastly, when changing the value of any 'repName', ensure to validate the rest of the controls. Angular only checks the formControl that has been changed, not the others. So we create a function for this purpose:

  checkFormArray()
  {
    this.detailsFormArray.controls.forEach(x=>{
      (x as FormGroup).get('repName').updateValueAndValidity()
    })
  }
  //I use a getter for the formArray
  get detailsFormArray() {
     return (this.verificationForm.get("repDetails") as FormArray)
  }

Invoke the function within the input tag like so:

  <input formControlName="repName" (input)="checkFormArray()">

You can view the actual implementation on StackBlitz

NOTE: I removed the angularjs tag from your question as it pertains solely to Angular.

Tips for validating duplicate entries in dynamically added form fields

Answer №1

Similar questions

Access to Oracle Cloud exclusive to Angular Framework, omitting AngularJS and Mid-Tier

Angular 12 experiencing CSS alignment issues

Ways to make an element disappear when clicking outside of it in Angular 7 or with CSS

If I exclusively utilize TypeScript with Node, is it possible to transpile it to ES6?

Steps for logging in using Spring Boot and Angular 2

Retrieving a FirebaseObjectObservable child in Angularfire2 is straightforward

Using React's Ref to handle conditional rendering and handling the case when

Displaying rows with no data in an Angular Material table

The npm audit command flagged an issue with an invalid tag name,

Aliases for NPM packages and TypeScript declaration files

NextJS function utilizes its own references within React and automatically fetches data without the need for an import

Router-outlet not displaying any content

Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

Error is being thrown due to defining a variable after it has already been declared and

Is there a way to reset useQuery cache from a different component?

Struggling to resolve Docker freezing during the "RUN npm run build" step while working with Angular 15?

What could be the reason for my Angular website displaying a directory instead of the expected content when deployed on I

Issue: Inadequate parameters have been supplied for the localized pathname (getPathname()). This problem arose after the inclusion of "next-intl/routing" module

Securing Single Page Applications

When transitioning from Angular5 to Angular6, it seems that the angular.json file has not been properly updated