Need to double tap to reset form with NgForm in Angular 4

Question

I'm having a little trouble getting this form to reset on submit on the first click. On second click it submits perfectly but sends another email with nodemailer, which I don't want obviously. (i'm using NgForm for clarification)

export class ContactFormComponent implements OnInit {
  message: Message;

  number: number;
  email: string;
  name: string;
  subject: string;
  text: string;
  html: string;


  constructor(private emailTransportService: EmailTransporterService) { }


  onSubmit(form: NgForm) {
    this.number = form.value.number;
    this.email = form.value.email;
    this.name = form.value.name;
    this.subject = 'Question from ' + this.name;
    this.text = form.value.text;
    this.html = '<p>'+ this.text + '</p>'+'<br><h8><strong>Contact Information</strong></h8>'+'<br>---------------'+
    '<br><h9>Name: ' + this.name + '<br>Phone: ' + this.number + '<br>Email: ' + this.email + '</h9>';
    this.message = new Message(this.subject, this.html);
    this.emailTransportService.createMessage(this.message, 'contact')
      .subscribe(
        data => console.log(data),
        error => console.error(error)
      );
    form.resetForm();
  }

  onClear(form: NgForm) {
    this.message = null;
    form.resetForm();
  }

  ngOnInit() {
  }

}

-- template

   <div class="row">
  <div class="col-lg-12">
    <form name="sentMessage" id="contactForm" (ngSubmit)="onSubmit(f)" #f="ngForm">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="Your Name *"
              id="name"
              [ngModel]="name"
              name="name"
              required
              data-validation-required-message="Please enter your name.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input
              type="email"
              class="form-control"
              placeholder="Your Email *"
              id="email"
              [ngModel]="email"
              name="email"
              required
              data-validation-required-message="Please enter your email address.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input
              type="tel"
              class="form-control"
              placeholder="Your Phone *"
              id="phone"
              [ngModel]="number"
              name="number"
              required
              data-validation-required-message="Please enter your phone number.">
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <textarea
              class="form-control"
              placeholder="Your Message *"
              id="message"
              [ngModel]="text"
              name="text"
              required
              data-validation-required-message="Please enter a message."></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-lg-12 text-center">
          <div id="success"></div>
          <button type="button" class="btn btn-danger" style="cursor: pointer" (click)="onClear(f)">Clear</button>
          <button type="submit" class="btn btn-primary" style="cursor: pointer" >Send Message</button>
        </div>
      </div>
    </form>
  </div>
</div>

I have a similar component with what I see as almost identical code that resets on submit. My brain hurts from looking at both tediously and finding no differences. Maybe someone else can find an error in my code that's causing the button to submit on the second click only. Below is the component and template for the identical form.

----Other component

export class PrayerRequestFormComponent implements OnInit {
  message: Message;

  text: string;
  subject: string;
  name: string;
  html: string;


  constructor(private emailTransportService: EmailTransporterService) { }

  ngOnInit() {}

  onSubmit(form: NgForm) {
this.name = form.value.name;

    this.text = form.value.text;
    this.subject = 'Prayer Request from ' + this.name;
    this.html = '<p>'+ this.text + '</p>'+'<br><h8><strong>From</strong></h8>'+'<br>---------------'+
      '<br><h9>Name: ' + this.name;
    this.message = new Message(this.subject, this.html);
    this.emailTransportService.createMessage(this.message, 'prayerrequest')
      .subscribe(
        data => console.log(data),
        error => console.error(error)
      );
    form.resetForm();
  }


  onClear(form: NgForm) {
    this.message = null;
    form.resetForm();
  }

}

-----other template

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text"
           id="name"
           class="form-control"
           name="name"
           [ngModel]="name"
           required>
    <label for="text">Message</label>
    <textarea name="text"
              id="text"
              cols="30"
              rows="10"
              class="form-control"
              [ngModel]="text"
              required></textarea>
  </div>
  <button class="btn btn-danger" (click)="onClear(f)">Clear</button>
  <button class="btn btn-primary" type-="submit">Send Request</button>
</form>

------UPDATE I updated the form, putting type="button" on the prayerRequest component and tried removing it from the other component, it made no difference. It may be a programmatic error in the component.ts file

----UPDATE After fixing the name of the message form and correcting my .ts file, both forms do not clear on click now .......

Answer 1

In the sample code I referenced here: https://github.com/DeborahK/Angular2-ReactiveForms

I have this code in my Product service:

initializeProduct(): IProduct {
    // Return an initialized object
    return {
        id: 0,
        productName: null,
        productCode: null,
        tags: [''],
        releaseDate: null,
        price: null,
        description: null,
        starRating: null,
        imageUrl: null
    };
}

Yes, you will need to do something similar.