title: Angular Form control is invalid on component init, without any action
body: <p>On component init all the form controls with validators are marked as invalid without taking any actions.</p>
  
  <p><code>component.html</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="form" (ngSubmit)="submit()"&gt;
    &lt;input type="text" formControlName="phone" [class.error]="form.get('phone').invalid"&gt;
    &lt;button type="submit"&gt;goo&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><code>component.ts</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, VERSION } from '@angular/core';
  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    form: FormGroup;
  
    constructor(public fb: FormBuilder) {
        this.form = this.fb.group({
            phone: [
                null,
                [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern('^[0-9]*$')]
            ]
        });
  
        console.log(this.form);
    }
  
    submit() {
        if (this.form.invalid) return;
  
        console.log(this.form.value);
    }
  }
  
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-ivy-tztih8?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">Stackblitz</a></p>