title: angular form control required validator only works when their is form input
body: <p>I've got a reactive form with nested formgroups with some form controls that have required validators.</p>
  <p>It seems the validation only occurs when a user inputs values into the form.  If the
  form is submitted with no user interaction, empty textboxes with a required validator show as valid.
  Is this a normal behavior of angular forms? Am I missing something?</p>
  <p>Thanks</p>
  <p>Pete</p>
  <p>html template:</p>
  <pre><code>&lt;form [formGroup]=&quot;ticketMarkForm&quot; (ngSubmit)=&quot;submitTicket()&quot;&gt;
    ..
     &lt;div formGroupName =&quot;systemForm&quot;&gt;
       &lt;mat-form-field appearance=&quot;outline&quot;&gt;
        &lt;mat-label&gt;Pipe Length (Ft):&lt;/mat-label&gt;
        &lt;input matInput type=&quot;number&quot; required formControlName=&quot;pipeLength&quot;&gt;
       &lt;/mat-form-field&gt;
  &lt;/div&gt;
   ..
   &lt;button type=&quot;submit&quot; mat-stroked-button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>component typescript:</p>
  <pre><code>export class MtMarkFormComponent implements OnInit {
  ..
  ticketMarkForm: FormGroup;
  ...
  constructor(private checkService: MTMarkFormCheckService) { }
   ngOnInit(): void {
   //forms
   this.ticketMarkForm = new FormGroup({
    systemForm: new FormGroup({
      ...
     pipeDiameter: new FormControl(Validators.required),
     ...
    })
    });
  
  }
  submitTicket() {
     let pipeDiam:any=this.ticketMarkForm.get('systemForm').get('pipeDiameter');
     this.checkService.CheckRequiredValid(pipeDiam);
     }
  }
  </code></pre>
  <p>Service to check form typescript:</p>
  <pre><code>export class MTMarkFormCheckService {
   CheckRequiredValid(fc: FormControl) {
          if (fc.invalid) {//if the control is left blank/untouched evaluates to valid.  I've also 
    tried to mark the control as dirty (fc.markAsDirty()) but same result
              alert(&quot;invalid&quot;);
           }
           else {
             alert(&quot;valid&quot;);
          }
   }
  </code></pre>