title: Angular FormControls Always Valid When More Than One In Form
body: <p>I have two inputs that use FormControl that always show as valid but if I take one out then the remaining will be valid/invalid as expected. I would change the two formcontrols out for one ControlGroup but 1.) I want to understand what I'm doing wrong and 2.) I need to access one formcontrol for an autocomplete I have in the component.</p>
  <p>Relevant HTML:</p>
  <pre><code>&lt;form 
      fxLayout=&quot;column&quot; 
      fxLayoutAlign=&quot;center center&quot; 
      (ngSubmit)=&quot;onSubmit(status, count)&quot; 
      #statusForm=&quot;ngForm&quot;
  &gt;
  
      &lt;!-- Status Input --&gt;
      &lt;div&gt;
          &lt;mat-form-field&gt;
          &lt;input 
              matInput placeholder=&quot;Status&quot; 
              [formControl]=&quot;statusFormControl&quot;
              [errorStateMatcher]=&quot;matcher&quot;
              [matAutocomplete]=&quot;auto&quot;
              [(ngModel)]=&quot;status&quot;
              name=&quot;status&quot;
              required
          &gt;
          &lt;mat-error *ngIf=&quot;statusFormControl.hasError('required')&quot;&gt;
              Status is &lt;strong&gt;required&lt;/strong&gt;
          &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot;&gt;
          &lt;mat-option *ngFor=&quot;let status of filteredStatusList | async&quot; [value]=&quot;status.name&quot;&gt;
          {{ status.name }}
          &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Count Input --&gt;
      &lt;mat-form-field&gt;
          &lt;input 
              matInput placeholder=&quot;Count&quot; 
              [formControl]=&quot;countFormControl&quot;
              type=&quot;number&quot;
              min=&quot;1&quot;
              [(ngModel)]=&quot;count&quot;
              name=&quot;count&quot;
              required
          &gt;
          &lt;mat-error *ngIf=&quot;countFormControl.hasError('required')&quot;&gt;
              Count must be a &lt;strong&gt;number&lt;/strong&gt;
          &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  
      {{statusForm.valid}}
      {{statusForm.invalid}}
  
      &lt;button 
          mat-raised-button color=&quot;primary&quot; 
          *ngIf=&quot;statusForm.valid&quot; 
          type=&quot;submit&quot; 
          [disabled]=&quot;statusForm.invalid&quot;
      &gt;
          Add
      &lt;/button&gt;
  </code></pre>
  <p>and TS:</p>
  <pre><code>export class ... {
  
  statusFormControl = new FormControl('', [
      Validators.required
  ]);
  
  countFormControl = new FormControl('', [
      Validators.required
  ]);
  
  ...
  
  constructor() {
  this.filteredStatusList = this.statusFormControl.valueChanges
    .pipe(
      startWith(''),
      map(status =&gt; status ? this.filterStatusList(status) : this.allStatuses.slice())
    );
  
  }
  
  filterStatusList(statusName: string) {
  return this.allStatuses.filter(status =&gt;
    status.name.toLowerCase().indexOf(statusName.toLowerCase()) === 0);
  }
  
  }
  </code></pre>