title: Angular Material Checkbox Validation
body: <p>I am wondering of a way to validate required checkbox in the same style angular material handles validation for other controls - on form submission, the control appears red unless touched.</p>
  
  <p>I think I can do this with <code>ng-style</code> however, I can't think of a way to check if the form has been submitted</p>
  
  <p>Here is a snippet of the HTML</p>
  
  <pre><code> &lt;form [formGroup]="frmFinish" name="frmFinish"&gt;
          &lt;mat-checkbox required formControlName="check1"&gt;Discussed Confidentiality and Information Sharing with Service User&lt;/mat-checkbox&gt;
          &lt;mat-checkbox required formControlName="check2"&gt;Discussed Disposal and Storage of Injecting Equipment and Substances&lt;/mat-checkbox&gt;
          &lt;mat-checkbox required formControlName="check3"&gt;Discussed Overdose Risk and Prevention&lt;/mat-checkbox&gt;
  
          &lt;mat-form-field&gt;
              &lt;textarea formControlName="note" [(ngModel)]="stepFive.note" matInput placeholder="Any Additional Notes" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"&gt;&lt;/textarea&gt;
              &lt;mat-hint align="end"&gt;This will be added to the profiles note's&lt;/mat-hint&gt;
          &lt;/mat-form-field&gt;
  
          &lt;mat-card-actions&gt;
              &lt;button mat-raised-button type="button" class="nav-btn pull-right" (click)="fillForm()" style="background: red"&gt;Fill Form&lt;/button&gt;
              &lt;button mat-raised-button class="nav-btn pull-right" style="margin-left:5px;" (click)="createProfile()" type="submit"&gt;Finish&lt;/button&gt;
              &lt;button mat-raised-button matStepperPrevious class="nav-btn pull-right"&gt;Previous&lt;/button&gt;
          &lt;/mat-card-actions&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>And here is the typescript:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { CreateProfileComponent } from '../create-profile.component';
  
  @Component({
      selector: 'step-five-component',
      templateUrl: './step-five.component.html',
      styleUrls: ['../create-profile.component.css']
  })
  export class StepFiveComponent {
      frmFinish: FormGroup;
  
      stepFive = {
          note: null
      };
  
      constructor(private formBuilder: FormBuilder) {
          this.frmFinish = this.formBuilder.group({});
      }
  
      ngOnInit() {
          this.frmFinish = this.formBuilder.group({
              note: ['', Validators.required],
              check1: ['', Validators.required],
              check2: ['', Validators.required],
              check3: ['', Validators.required],
          });
      }
  
      createProfile(){
          if(this.frmFinish.valid){
              console.log('Creating profile..');
          }else{
  
          }
      }
  
      fillForm(){
          this.stepFive.note = 'asdasd';
      }
  
  }
  </code></pre>