title: Angular 6 + Angular Material - Form validation on submit
body: <p>I have some input fields with different validation rules set on them. 
  But I also want to add some validation to all the fields at once, when submitting, or make submit button disabled, if there are any errors above.</p>
  
  <p>However, I haven't put all my inputs inside form tag from the beginning and have kind of trouble with that right now. I am new to all of this, so can you please help me? Is there any way to solve it, without recreating all the form? :(</p>
  
  <p>I've tried adding: </p>
  
  <pre><code>  &lt;form #stepOneForm="ngForm"&gt;
  
    &lt;button type="submit [disabled]="!stepOneForm.form.valid" mat-button matStepperNext&gt;Go to next step&lt;/button&gt;
  </code></pre>
  
  <p>But it didnt help...</p>
  
  <p>My code looks as below:</p>
  
  <p>HTML</p>
  
  <pre><code>      &lt;!-- Name --&gt;
        &lt;mat-form-field class="dcp-input-field"&gt;
          &lt;input matInput placeholder="Name" [formControl]="name" [errorStateMatcher]="matcher"&gt;
          &lt;mat-hint&gt;Please enter your name&lt;/mat-hint&gt;
  
          &lt;mat-error *ngIf="name.hasError('required')"&gt;
            This is &lt;strong&gt;required&lt;/strong&gt; field
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  
        &lt;!-- DoB --&gt;
        &lt;mat-form-field class="dcp-input-field"&gt;
          &lt;input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="dob" [errorStateMatcher]="matcher"&gt;
          &lt;mat-datepicker-toggle matSuffix [for]="dp"&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #dp&gt;&lt;/mat-datepicker&gt;
          &lt;mat-hint&gt;Please enter your date of birth&lt;/mat-hint&gt;
  
          &lt;mat-error *ngIf="dob.hasError('required')"&gt;
            This is &lt;strong&gt;required&lt;/strong&gt; field
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  
        &lt;!-- PolicyNo --&gt;
        &lt;mat-form-field class="dcp-input-field"&gt;
          &lt;input matInput placeholder="Policy number" [formControl]="policyNo" [errorStateMatcher]="matcher"&gt;
          &lt;mat-hint&gt;Please enter your Policy number&lt;/mat-hint&gt;
  
          &lt;mat-error *ngIf="policyNo.hasError('required')"&gt;
            This is &lt;strong&gt;required&lt;/strong&gt; field
          &lt;/mat-error&gt;
          &lt;mat-error *ngIf="policyNo.hasError('minlength')"&gt;
            The value is &lt;strong&gt;too short&lt;/strong&gt;
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>TS</p>
  
  <pre><code> export class MyErrorStateMatcher implements ErrorStateMatcher {
     isErrorState(
       control: FormControl | null,
       form: FormGroupDirective | NgForm | null
     ): boolean {
       const isSubmitted = form &amp;&amp; form.submitted;
       return !!(
         control &amp;&amp;
         control.invalid &amp;&amp;
         (control.dirty || control.touched || isSubmitted)
       );
     }
   }
  
  
    name = new FormControl("", [Validators.required]);
    dob = new FormControl("", [Validators.required]);
    policyNo = new FormControl("", [
      Validators.required,
      Validators.minLength(6)
    ]);
  
    matcher = new MyErrorStateMatcher();
  </code></pre>
  
  <p>Thank you and sorry for noob question! ;)</p>