app.component.html

<h1>
  {{title}}
</h1>

<form [formGroup]="form" (submit)="submit()" (window:resize)="beResponsive()">
  <div fxLayout="row">
    <button type="button" (click)="clear()" [disabled]="!form.controls.signatureField1.valid && !form.controls.signatureField2.valid && !form.controls.signatureField3.valid">Clear</button>
    <button type="submit" [disabled]="!form.valid">Submit</button>
  </div>
  <div class="sig-container" #sigContainer1>
    <div fxLayout="row">
      <button type="button" (click)="sigs.first.clear()" [disabled]="!form.controls.signatureField1.valid">Clear Sig 1</button>
    </div>
    <div fxLayout="row">
      <signature-field formControlName="signatureField1"></signature-field>
    </div>
  </div>
  <div class="sig-container" #sigContainer2>
    <div fxLayout="row">
      <button type="button" (click)="secondSig.clear()" [disabled]="!form.controls.signatureField2.valid">Clear Sig 2</button>
    </div>
    <div fxLayout="row">
      <signature-field formControlName="signatureField2"></signature-field>
    </div>
  </div>
  <div class="sig-container sig-container-image" #sigContainer3>
    <div fxLayout="row">
      <button type="button" (click)="sigs.last.clear()" [disabled]="!form.controls.signatureField3.valid">Clear Sig 3</button>
    </div>
    <div fxLayout="row">
      <signature-field formControlName="signatureField3"></signature-field>
    </div>
  </div>
</form>