需要双击以使用Angular 4中的NgForm重置表单

我在第一次点击时将此表单重置为提交时遇到了一些麻烦 . 在第二次点击它完全提交，但发送另一封电子邮件与nodemailer，我不明显 . （我正在使用NgForm进行澄清）

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() {
  }

}

• 模板

<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>

我有一个类似的组件，我认为几乎相同的代码重置提交 . 我既厌倦又看不出任何差异，从而伤害了我的大脑 . 也许其他人可以在我的代码中发现错误，导致按钮仅在第二次点击时提交 . 下面是相同表单的组件和模板 .

----其他组件

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();
  }

}

-----其他模板

<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我更新了表单，在prayRequest组件上放了type =“button”并尝试将其从其他组件中删除，它没有任何区别 . 它可能是component.ts文件中的编程错误

----更新修复邮件表单的名称并更正我的.ts文件后，现在点击两个表单都不清楚.......