Question

我有一些使用ngSubmit函数的成功实现。但是现在，使用bootstrap模式窗口，我遇到的问题是我的设置组件中的submit方法没有被调用。我试图把它移到不同的地方，但没有成功。

这是我的代码：

设置组件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']);
  }
}

提前致谢！

Answer 1

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

<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控件绑定到模型中的formControl使用formControlName指令进行绑定

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

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

提交没有使用bootstrap模式调用的方法

1 个答案: