title: Angular 6 Form using ngsubmit="onSubmit()"
body: <p>Even if the required fields are empty the form details gets saved. I tried disabling button but nothing worked.</p>
  
  <p>Here is my source code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form [formGroup]="userForm" (ngSubmit)="onSubmit()" #myForm="ngForm"&gt;
            &lt;mat-form-field class="example-full-width" style="margin-left:20px"&gt;
              &lt;input matInput placeholder="Full Name" formControlName="userName" name="userName" required&gt;
              &lt;mat-hint&gt; eg:Harry Potter&lt;/mat-hint&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field hintLabel="Max 10 characters" style="margin-left:20px"&gt;
              &lt;input matInput #input maxlength="10" placeholder="Enter your phone number" formControlName="userPhone" name="userPhone"
                required&gt;
              &lt;mat-hint align="end"&gt;{{input.value?.length || 0}}/10&lt;/mat-hint&gt;
            &lt;/mat-form-field&gt;
            &lt;br&gt;
            &lt;mat-form-field class="example-full-width" style="margin-left:20px"&gt;
              &lt;input matInput placeholder="Email" [formControl]="userEmail" required="required"&gt;
              &lt;mat-error *ngIf="userEmail.hasError('email') &amp;&amp; !userEmail.hasError('required')"&gt;
                Please enter a valid email address
              &lt;/mat-error&gt;
              &lt;mat-error *ngIf="userEmail.hasError('required')"&gt;
                Email is &lt;strong&gt;required&lt;/strong&gt;
              &lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field class="example-full-width" style="margin-left:20px"&gt;
              &lt;input matInput placeholder="Address" formControlName="userAddress" name="userAddType" required&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field class="example-full-width" style="margin-left:20px"&gt;
              &lt;input matInput placeholder="Type of address" formControlName="userAddType" name="userAddType"&gt;
              &lt;mat-hint&gt;eg: Home, Work&lt;/mat-hint&gt;
            &lt;/mat-form-field&gt;
            &lt;br&gt;
            &lt;button style="background-color:darkorange;border-radius: 8px;height:50px;margin-left:60px"&gt;
              Save and Deliver&lt;/button&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p><strong>TypeScript</strong></p>
  
  <pre><code>  onSubmit() {
      // console.log(this.userName.value);   
        this.add.name = this.userName.value;
        this.add.phone = this.userPhone.value;
        this.add.address = this.userAddress.value;
        this.add.email = this.userEmail.value;
        this.firebase.addAddress(this.add);
    }
  </code></pre>
  
  <p>How can I validate the form in such a way that it does <strong>not</strong> save form details until required fields are not blank?</p>