title: How to retrieve values from angular material forms with QuerySelector
body: <p>I am try to retrieve values from an angular from by using the javascript document.querySelector.
  I am able to retrieve input field values but when I comes to radio button, toggles and select box, I am not able to retrieve values.
   I am not able retrieve the value using </p>
  
  <pre><code>(document.querySelector('.recurring_subscription') as HTMLInputElement).value
  (document.querySelector('.given_to') as HTMLInputElement).value
  (document.querySelector('.billing_state') as HTMLInputElement).value
  
  
  
  &lt;mat-slide-toggle class="mat-toggle-nusa" class="recurring_subscription" formControlName="recurring_subscription"&gt;
    Automatic donate this amount once every Month
                &lt;/mat-slide-toggle&gt;
   &lt;mat-radio-button *ngFor="let dt of nusa_given" class="given_to" [value]='dt.value' &gt; {{dt.name}} &lt;/mat-radio-button&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;mat-select formControlName="billing_state" class="billing_state" placeholder="Enter State (required)"&gt;
                          &lt;mat-option *ngFor="let state of getNameOfStates | async" [value]="state.abbreviation"&gt;
                            {{ state.abbreviation }}
                          &lt;/mat-option&gt;
                        &lt;/mat-select&gt;
  </code></pre>