title: How to add validation to FormArray onSubmit() in angular 6
body: <p>I have gone through all the answers in stackOverflow and internet.</p>
  
  <p>I have got solution only for <strong>FormArray with FormGroup</strong>, but i want save the data in FormArray only</p>
  
  <p><code>WorkId:["a","b","c"]</code></p>
  
  <p>and the data that i  get from server also in the above format</p>
  
  <p>and this is my Code</p>
  
  <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>WorkIDList: this.formBuilder.array([
    this.formBuilder.control(""), Validators.required
  ], Validators.required);
  
  get WorkIDlist() {
    return this.registerForm.get("WorkIDList") as FormArray;
  }
  addworkidlist() {
    this.WorkIDlist.push(this.formBuilder.control(""));
  }
  submit(data, event: Event) {
    this.submitted = true;
    if (this.registerForm.invalid) {
      this.validateAllFields(this.registerForm);
      return;
      // alert("all fields must be filled");
    } else {
      event.preventDefault();
      console.log("data", data);
    }
  }
  // validation on submit
  
  validateAllFields(formGroup: FormGroup) {
    Object.keys(formGroup.controls).forEach(field =&gt; {
      const control = formGroup.get(field);
      if (control instanceof FormArray) {
        control.markAsTouched();
      }
      if (control instanceof FormControl) {
        control.markAsTouched({
          onlySelf: true
        });
      } else if (control instanceof FormGroup) {
        this.validateAllFields(control);
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
    &lt;div class="col-sm-9" formArrayName="WorkIDList"&gt;
      &lt;div *ngFor="let address of WorkIDlist.controls; let i=index"&gt;
        &lt;input class="form-control workIdList" type="text" [formControlName]="i" required /&gt;
        &lt;!-- &lt;div *ngIf="address.invalid &amp;&amp; (address[i].dirty || address[i].touched)"
                      class="alert alert-danger"&gt;
                      &lt;div *ngIf="address[i].errors.required"&gt;
                        WorkspaceName is required.
                      &lt;/div&gt;
                    &lt;/div&gt; --&gt;
        &lt;div *ngIf="address[i].invalid"&gt;
          &lt;div *ngIf="address.hasError('required')"&gt;
            Error
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="button" (click)="addworkidlist()"&gt;Add&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't give validation in html and can't throw error validation  on <code>submit()</code> through script </p>
  
  <p>Can anyone help on this issue.</p>
  
  <p>Thanks in advance.</p>