时间戳

首页 > 解决方案 > 未使用引导模式调用提交方法

angular - 未使用引导模式调用提交方法

问题描述

我有一些使用 ngSubmit 函数的成功实现。但是现在，使用引导模式窗口，我的设置组件中的提交方法没有被调用。我试图将它们移动到不同的地方，但没有成功。

这是我的代码：

设置组件html

  <div>
  <button data-toggle="modal" data-target="#apiModal" type="button" class="btn btn-light">Test view
  </button>
</div>


<div>
  <form [formGroup]="settingsForm" (ngSubmit)="onSubmit()">
    <div class="modal fade" id="apiModal" tabindex="-1" role="dialog"
         data-keyboard="false">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Change your account data</h5>
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
            <input class="form-control" id="email"
                   placeholder="Enter your email" formControlName="email"/>
            <input class="form-control" id="oldPassword"
                   placeholder="Enter current password" formControlName="oldPassword"/>
            <input class="form-control" id="newPassword"
                   placeholder="Enter new password" formControlName="newPassword"/>
            <input class="form-control" id="newUsername"
                   placeholder="Enter new username" formControlName="newUsername"/>
          </div>
          <div class="modal-footer">
            <div class="form-group">
              <button type="submit" class="btn btn-light"
                      data-dismiss="modal">Discard
              </button>
              <button type="submit" class="btn btn-outline-primary"
                      data-dismiss="modal">Save
              </button>
            </div>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </form>
</div>

设置组件 ts

import {Component, OnInit} from '@angular/core';
import {SocketService} from '../../services/socketService/socket-service.service';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {

  settingsForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
              private route: ActivatedRoute,
              private router: Router,
              private socketService: SocketService) {
  }

  ngOnInit() {
    this.settingsForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      oldPassword: ['', [Validators.required, Validators.minLength(1)]],
      newPassword: ['', [Validators.required, Validators.minLength(1)]],
      newUsername: ['', [Validators.required, Validators.minLength(1)]]
    });
  }

  onSubmit() {
    console.log('on Submit');
    // stop here if form is invalid
    if (this.settingsForm.invalid) {
      return;
    }
    const email = this.settingsForm.controls['email'].value;
    const oldPassword = this.settingsForm.controls['oldPassword'].value;
    const newPassword = this.settingsForm.controls['newPassword'].value;
    const newUsername = this.settingsForm.controls['newUsername'].value;

    const renameUser = {
      email: email,
      userName: newUsername
    };

    const ChangeUserPassword = {
      email: email,
      oldPassword: oldPassword,
      newPassword: newPassword
    };

    this.socketService.receiveEventString('LoggedIn').subscribe((message: MessageEvent) => {
      const obj: BackendResponse = JSON.parse(message.data);
      console.log(obj.type);
      console.log((obj.value));
    });

    this.socketService.sendEvent('ChangeUserPassword', ChangeUserPassword);
    this.socketService.sendEvent('RenameUser', renameUser);
    this.router.navigate(['/chat-rooms']);
  }
}

提前致谢！

标签： angulartwitter-bootstrap

解决方案

将按钮类型从 更改button为 submit以触发ngSubmit事件。 文档

  <button type="submit" class="btn btn-light"
                          data-dismiss="modal">Discard
                  </button>
                  <button type="submit" class="btn btn-outline-primary"
                          data-dismiss="modal">Save
        </button>

除此之外，我看到您已将表单绑定到模型
form [formGroup]="settingsForm"，但您忘记将 HTML 控件绑定到模型使用formControlName指令中的 formControl 以进行绑定

 <input class="form-control" id="email"
               placeholder="Enter your email" formControlName="email"/>

对其余的表单控件进行此更改，并在您的模型中引入一个新的 formControl， oldUsername:new Form Control()因为您错过了
我强烈建议您通过DOCS

推荐阅读