需要双击以在 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" 放在 prayerRequest 组件上并尝试将其从其他组件中删除，但没有任何区别。这可能是 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
    };
}

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

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

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

angular2-forms

angular