CODEWITHSUNDEEP
javascriptvalidationangular6angular-reactive-forms
Sanira Liyanage
Sanira Liyanage

Reputation: 1237

validating and display error messages for specific form controller in a form array angular

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, ValidatorFn, AbstractControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.buildForm();
  }
  get vehicleGroup(): FormArray {
    return <FormArray>this.myForm.get('vehicleGroup');
  }

  buildForm(): void {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      vehicleGroup: this.fb.array([
        this.fb.group({
          vehicle: ['', Validators.required]
        })
      ], [Validators.required]),
    });
  }

  addVehicles(): void{
    const itemToAdd = this.fb.group({
      vehicle: ['', Validators.required]
    });
    this.vehicleGroup.push(itemToAdd);
  }
  deleteVehicle(i: number){
    this.vehicleGroup.removeAt(i);
  }

  save(): void{
    console.log('save');
  }
}
<form novalidate (ngSubmit)="save()" [formGroup]="myForm">

  <div class="form-group">
    <label for="name">Name</label>
    <input id="name" type="text" formControlName="name">
  </div>

	<div class="form-group">
		<label for="vehicle">Vehicle</label>
      <div formArrayName="vehicleGroup" *ngFor="let vehicle of vehicleGroup.controls; let i=index">
        <div class="form-group" [formGroupName]="i">
          <div>
            <input id="{{'vehicle'+i}}" type="text" formControlName="vehicle">
            <button type="button" (click)="deleteVehicle(i)"
              *ngIf="vehicleGroup.length >= 2">remove
            </button>                  
          </div>
        </div>
      </div>
      <div class="form-group">
      <button type="button" class="link-button" [disabled]="!vehicleGroup.valid" (click)="addVehicles()">
          + Add more vehicles
      </button>
      </div>
	</div> 
</form>

I have this (stackBlitz) simple form created with angular formBuilder

I simple need to how to validate each elements of the dynamic formArray and display a unique message for each of them if that particular field is not valid. I tried several solutions and also tried custom validator function with return an ValidatorFn. with that I could simply validate the formArray, but It's not good enough for my scenario and still I can not display messages according to the validate functions behavior. How ever to narrow it down, I simply need to know if there is a better way to validate each dynamic elements of this formArray. these are the validate rules.

  1. each filed value should be unique.
  2. need to validate real time
  3. after adding few elements, someone edit previously added field, it also should be validate in real time with every other field values(this is where I got struck, I could validate upwards from the editing field, but not the fields below the editing field is validated accordingly)

If some one can show me some way to achieve this in a right way, It would be really great, since I'm struck with this for almost 3 days now, and still can't get an better solution.

Upvotes: 0

Views: 1741

Answers (1)

Srishti Khandelwal
Srishti Khandelwal

Reputation: 587

I have used unique validator of @rxweb/reactive-form-validators in my project. It can be used directly in the component without creating any custom validation function.

You can edit your addVehicles method as follows: 

addVehicles(): void{
    const itemToAdd = this.fb.group({
      vehicle: ['', RxwebValidators.unique()]
    });
    this.vehicleGroup.push(itemToAdd);
  }

and adding 

ReactiveFormConfig.set({"validationMessage":{"unique":"Enter unique value in the input"}});

to ngOnInit.

Here is the forked stackblitz

Upvotes: 3

Related Questions