角度6:无法以模式提交表单

时间:2018-12-11 14:45:08

标签: angular forms post popup bootstrap-modal

我有一个课程的Angular 6应用程序,我想在模态内部创建一个表单,该表单连接到表单保存并在那里发送数据。 没有模式,它就可以正常工作并将数据发送到表单保持,但是当我使用模式时,它就不能工作。

这是html文件和组件文件:

<div class="row mt-3">
  <button class="upgrade" (click)="open(content)">Upgrade Academy</button>
</div>

<ng-template #content let-c="close" let-d="dismiss">
    <span class="closes" aria-label="Close" (click)="d('Cross click')">&times;</span>

    <div class="text-center jumbotron">
      <h1 class="display-4">Upgrade Academy!</h1>
      <p class="contact">Contact information</p>
      <form accept-charset="UTF-8" action="https://formkeep.com/f/2f76e41ddc2a" method="POST">
        <div class="form-group">
          <label for="first-name"></label>
          <input type="text" id="first-name" name="first-name" placeholder="First name*" class="field" required>
        </div>
        <div class="form-group">
          <label for="last-name"></label>
          <input type="text" id="last-name" name="last-name" placeholder="Last name*" class="field" required>
        </div>
        <div class="form-group">
          <label for="email"></label>
          <input type="email" id="email-address" name="email" placeholder="Enter email*" class="field" required>
        </div>
        <div class="form-group">
          <label for="organization"></label>
          <input type="text" id="organization" name="organization" placeholder="Organization*" class="field" required>
        </div>
        <div class="form-group">
          <label for="message"></label>
          <textarea type="text" id="message" name="message" placeholder="Your message" rows="4" class="field" style="height:150px;"></textarea>
        </div>
        <div class="form-group">
          <button class="submit btn btn-dark" type="submit">Get more information</button>
        </div>
      </form>
    </div>
</ng-template>

export class ComponentModal implements OnInit {

  constructor(private route: ActivatedRoute,
        private config: NgbModalConfig,
        private modalService: NgbModal,
        private activeModal: NgbActiveModal,
        private router: Router) {
          // customize default values of modals used by this component tree
          config.backdrop = 'static';
          config.keyboard = false;
        }

  open(content) {
    this.modalService.open(content, { size: 'lg' });
  }

  ngOnInit() {}

}

0 个答案:

没有答案