Which of the following is the correct way to utilize Angular Form’s template-driven approach?

• Option A

  <!-- .html -->
  <form (ngSubmit)="onSubmit(formLocalRef)" #formLocalRef>
     ...
  </form>
  

  // .component.ts
  onSubmit(formLocalRef: HTMLFormElement) {
    // do stuff with formLocalRef
  }
  

• Option B

  <!-- .html -->
  <form (ngSubmit)="onSubmit()" #formLocalRef>
     ...
  </form>
  

  // .component.ts
  @ViewChild('formLocalRef') form: HTMLFormElement;
  onSubmit() {
    // do stuff with this.formLocalRef
  }
  

• Option C

  <!-- .html -->
  <form (ngSubmit)="onSubmit()" #formLocalRef="ngForm">
     ...
  </form>
  

  // .component.ts
  @ViewChild('formLocalRef') form: NgForm;
  onSubmit() {
    // do stuff with formLocalRef
  }
  

Written with StackEdit.