title: validating and display error messages for specific form controller in a form array angular
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt;FormArray&gt;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');
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form novalidate (ngSubmit)="save()" [formGroup]="myForm"&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Name&lt;/label&gt;
      &lt;input id="name" type="text" formControlName="name"&gt;
    &lt;/div&gt;
  
   &lt;div class="form-group"&gt;
    &lt;label for="vehicle"&gt;Vehicle&lt;/label&gt;
        &lt;div formArrayName="vehicleGroup" *ngFor="let vehicle of vehicleGroup.controls; let i=index"&gt;
          &lt;div class="form-group" [formGroupName]="i"&gt;
            &lt;div&gt;
              &lt;input id="{{'vehicle'+i}}" type="text" formControlName="vehicle"&gt;
              &lt;button type="button" (click)="deleteVehicle(i)"
                *ngIf="vehicleGroup.length &gt;= 2"&gt;remove
              &lt;/button&gt;                  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
        &lt;button type="button" class="link-button" [disabled]="!vehicleGroup.valid" (click)="addVehicles()"&gt;
            + Add more vehicles
        &lt;/button&gt;
        &lt;/div&gt;
   &lt;/div&gt; 
  &lt;/form&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>I have this <a href="https://stackblitz.com/edit/angular-fvtcff" rel="nofollow noreferrer">(stackBlitz)</a> simple form created with angular <code>formBuilder</code></p>
  
  <p>I simple need to how to validate each elements of the dynamic <code>formArray</code> and display a unique message for each of them if that particular field is not valid. 
  I tried several solutions and also tried <code>custom validator function</code> with return an <code>ValidatorFn</code>. with that I could simply validate the <code>formArray</code>, 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 <code>formArray</code>. these are the validate rules.</p>
  
  <ol>
  <li>each filed value should be unique.</li>
  <li>need to validate real time</li>
  <li>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)</li>
  </ol>
  
  <p>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.</p>