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

Question

我在第一次点击提交时重置此表单时遇到了一点问题。在第二次单击时，它完美提交，但使用 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>

-----更新 我更新了表单，将 type="button" 放在pragueRequest 组件上，并尝试将其从另一个组件中删除，但没有任何区别。可能是component.ts文件中的程序错误

----更新 在修复了消息表单的名称并更正了我的 .ts 文件后，现在单击时两种表单都无法清除.......

Answer 1

在我在这里引用的示例代码中：https://github.com/DeborahK/Angular2-ReactiveForms

我的产品服务中有此代码：

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

是的，你需要做类似的事情。