Хобрук: Ваш путь к мастерству в программировании

После нажатия кнопки всплывающее окно не отображается в проекте angulr6

Я делаю проект в angular6. Я создал регистрационную форму и одновременно вызвал две функции: одну для отправки формы и другую для открытия всплывающего окна, как показано в коде. После нажатия кнопки отправки значения формы должны отображаться во всплывающем окне с окончательной кнопкой отправки, но здесь после нажатия кнопки отправки форма получает отправку, но всплывающее окно не открывается. Я не понимаю, где я сделал ошибку. Любая помощь, пожалуйста

регистрация.html

В этом файле я вызвал две функции одновременно.

<nav class="navbar navbar-expand-lg">Header
</nav>
<div class="container">
   <form [formGroup]="addForm" (ngSubmit)=[onSubmit(addForm.value),openModal()]> 

    <h2 class="text-center mt-3">Registration Form</h2>
    <div class="card-header mt-3 mb-3">Student Registration</div>

    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="usn"><strong>USN</strong></label>
          <input type="usn" formControlName="usn" placeholder="usn" name="usn" class="form-control" id="usn">
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group">
          <label for="firstName"><strong>First Name</strong></label>
          <input type="firstName" formControlName="firstName" placeholder="FirstName" name="firstName" class="form-control" id="firstName" ngModel>
        </div>
      </div>
    </div>
    <button class="btn btn-success mx-auto d-block" >Submit</button>
</div>

регистрация.ts

    import { Component, OnInit } from '@angular/core';
    import {FormBuilder, FormGroup, Validators} from "@angular/forms";
    import {Router} from "@angular/router";
    import {Inject} from '@angular/core';
    import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
    import { DisplayDataComponent } from '../display-data/display-data.component';

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

    constructor(private formBuilder: FormBuilder, private router: Router, public dialog: MatDialog) { }

    addForm: FormGroup;

    ngOnInit() {
        console.log("ngOnInit called")
          this.addForm = this.formBuilder.group({
          usn:[''],
          firstName:['']
        });
      }

     onSubmit(data) {
        console.log(data);`
        openModal(){
   console.log("calling")
    const dialogRef = this.dialog.open(DisplayDataComponent, {
      width: '250px',
          });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { FormGroup } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentParentRegistrationComponent } from './student-parent-registration/student-parent-registration.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { DisplayComponent } from './display/display.component';
import { DisplayDataComponent } from './display-data/display-data.component';
import {MatDialogModule} from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    StudentParentRegistrationComponent,
    DisplayComponent,

    DisplayDataComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    BsDatepickerModule.forRoot()
  ],

  entryComponents: [
  DisplayDataComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

После нажатия на кнопку не появляется всплывающее окно

06.05.2019

Ответы:


1

Похоже, вы не закрываете тег формы

07.05.2019
  • Ага. У меня закрытый тег формы. Но все еще не работает. 08.05.2019
  • возможно, вам не хватает начальной загрузки: [AppComponent], entryComponents: [DisplayDataComponent] в app.module, если нет, можете ли вы поделиться сообщениями (если есть), отображаемыми в инструментах разработчика? 08.05.2019
  • Хорошо. Я приложил скриншот сообщений, которые отображаются в инструменте разработчика. Пожалуйста, найдите эту ссылку. imgur.com/1yTm1Yh 08.05.2019
  • На самом деле я не добавлял готовую тему в style.css. И теперь я включил тему в style.css. Теперь я получаю всплывающее окно. 08.05.2019
  • Новые материалы

    5 проектов на Python, которые нужно создать прямо сейчас!
    Добро пожаловать! Python — один из моих любимых языков программирования. Если вы новичок в этом языке, перейдите по ссылке ниже, чтобы узнать о нем больше:

    Dall-E 2: недавние исследования показывают недостатки в искусстве, созданном искусственным интеллектом
    DALL-E 2 — это всеобщее внимание в индустрии искусственного интеллекта. Люди в списке ожидания пытаются заполучить продукт. Что это означает для развития креативной индустрии? О применении ИИ в..

    «Очень простой» эволюционный подход к обучению с подкреплением
    В прошлом семестре я посетил лекцию по обучению с подкреплением (RL) в моем университете. Честно говоря, я присоединился к нему официально, но я редко ходил на лекции, потому что в целом я нахожу..

    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..

    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..

    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..

    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..