title: Reactive Form Array - Avoid Validation Error when push new elements
body: <p>I have a form group which is composed by a single form array:</p>
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
      this.deviceDetailsFormGroup = this._formBuilder.group({
          deviceDetails: this._formBuilder.array([
              this.buildDeviceDetailsForm()
          ])
      });
  }
  </code></pre>
  <p>Each control in the Form Array has required validators:</p>
  <pre class="lang-js prettyprint-override"><code>buildDeviceDetailsForm(): FormGroup {
      return this._formBuilder.group({
          ipAddressCtrl: [
              &quot;&quot;,
              [Validators.pattern(ipaddressPattern), Validators.required]
          ],
          hostnameCtrl: [
              &quot;&quot;,
              [
                  Validators.required,
                  Validators.maxLength(30),
                  Validators.minLength(5)
              ]
          ]
      });
  }
  </code></pre>
  <p>Below are my push and remove functions to the Form Array:</p>
  <pre class="lang-js prettyprint-override"><code>addNewDevice() {
      this.deviceItems = this.deviceDetailsFormGroup.get(
          &quot;deviceDetails&quot;
      ) as FormArray;
  
      if (this.deviceItems.length &gt; MAX_DEVICES) {
          this.toastNotif.errorToastNotif(
              `A maximum of ${MAX_DEVICES} devices can be selected for a single job scan`,
              &quot;Too many devices selected&quot;
          );
          return;
      }
  
      if (this.deviceDetailsFormGroup.invalid) {
          return;
      }
  
      let mapIP = new Map&lt;string, number&gt;();
  
      // Warn about duplicate IP's in form
      this.deviceItems.controls.forEach(ctrl =&gt; {
          if (mapIP[ctrl.value.ipAddressCtrl] === 0) {
              this.toastNotif.warningToastNotif(
                  &quot;You have entered duplicate IP's in the form fields&quot;,
                  &quot;Duplicate&quot; + &quot; IP's&quot;
              );
          }
  
          mapIP[ctrl.value.ipAddressCtrl] = 0;
      });
  
      this.deviceItems.push(this.buildDeviceDetailsForm());
  }
  
  removeDevice(i: number) {
      this.deviceItems.removeAt(this.deviceItems.length - 1);
  }
  </code></pre>
  <p>When I push new elements to the Form Array, they're marked as invalid although they're untouched and pristine. I understand that's caused by the Validators and empty default values set when I create the new <code>FormGroup</code>.</p>
  <p>Is it possible to avoid this behavior so the <code>FormArray</code> elements are marked as errors only if they're touched ?</p>
  <p>Thanks in advance.</p>