title: Reactive forms - how to call separate action on one field only within form
body: <p>I have the following simple form.  I want a button that checks to see if the username is available with one specific field.  If username is available, then main submit button is enabled.  How do I achieve this? Is this a form within a form?</p>
  <pre><code>&lt;form mat-dialog-content [formGroup]=&quot;myForm&quot;&gt; 
  &lt;mat-form-field&gt;
    &lt;input matInput formControlName=&quot;firstName&quot; /&gt;
    &lt;mat-error&gt;{{ error }}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field&gt;
    &lt;input matInput  formControlName=&quot;lastName&quot; /&gt;
    &lt;mat-error&gt;{{ error }}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-form-field&gt;
    &lt;input matInput formControlName=&quot;username&quot; /&gt;
    &lt;mat-error&gt;{{ error }}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  
  //This button needs to be disabled unless username is filled out.  If user changes username the main submit button should be disabled unless user checks with this button.
  &lt;button (click)=&quot;userNameCheck()&quot; &gt;Check if available&lt;/button&gt;
  
  
  &lt;mat-form-field&gt;
    &lt;input matInput formControlName=&quot;notes&quot; /&gt;
    &lt;mat-error&gt;{{ error }}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  
  &lt;button (click)=&quot;save()&quot; [disabled]=&quot;myForm.invalid&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  export const FORM_CONTROLS = {
    firstName: [null, Validators.required],
    lastName: [null, Validators.required],
    username: [null, Validators.required],
    notes: [null],
  }
  
  
  this.myForm = this.formBuilder.group(FORM_CONTROLS);
  
  save() {
      const myData  = this.myForm.value;
      this.myService.saveData(myData);
  }
  </code></pre>