Отправить метод, не вызываемый при моде начальной загрузки

Question

У меня есть несколько успешных реализаций с функцией ngSubmit.Но теперь, с модальным окном начальной загрузки, у меня есть проблема, что метод 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. Документы

  <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"/>

Внесите эти изменения в остальные элементы управления формой и добавьте новый formControl в вашу модель oldUsername:new Form Control(), поскольку вы пропустили это
Я настоятельно рекомендую вам пройти через DOCS