Я новичок в angular Я хочу показать модальное с деталями формы для подтверждения перед отправкой формы

Question

При нажатии на кнопку «Зарегистрироваться» вместо отправки данных. Я хочу отобразить данные формы, заполненные пользователем, в модальном режиме, а затем пользователь может отправить или может go вернуться к форме для редактирования сведений.

С помощью Angular, как мы можем отобразить модальное значение для перепроверить и подтвердить введенные значения, введенные при нажатии кнопки отправки, перед отправкой данных формы.

registration.component. html

<div class="container">
    <h2>Registration</h2>
    <form #registerForm="ngForm" (ngSubmit)="registerUser()">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="firstname">First Name</label>
                <input type="text" class="form-control" placeholder="Enter First Name" id="firstname" name="firstName"
                required [(ngModel)]="user.firstName" #firstname ="ngModel" [class.is-invalid]="firstname.invalid && firstname.touched"
                >
                <small class="text-danger" [class.d-none]="firstname.valid || firstname.untouched">
                  First Name is required field
                </small>
              </div>
              <div class="form-group col-md-6">
                <label for="lastname">Last Name</label>
                <input type="text" class="form-control" placeholder="Enter Last Name" name="lastName" id="lastname"
                required [(ngModel)]="user.lastName" #lastname ="ngModel" [class.is-invalid]="lastname.invalid && lastname.touched"
                >
                <small class="text-danger" [class.d-none]="lastname.valid || lastname.untouched">
                  Last Name is required field
                </small>
            </div>
        </div>
        <button [disabled]="registerForm.form.invalid" type="submit" class="btn btn-primary">Sign Up</button>
        <small class="float-right btextual vishav-click" [routerLink]="['/login']">Existing User? Login Here</small>
    </form>
</div>

registration.component.ts

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';
import { User } from '../user';
import { RegistrationService } from '../registration.service';
import { Router } from '@angular/router';
import { HttpResponse } from '@angular/common/http';

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

  user = new User();
  status=200;
  msg='';

  constructor(private _service: RegistrationService, private _router : Router) { }

  ngOnInit(): void {
  }

  registerUser(){
    this._service.registerUserFromRemote(this.user).subscribe(
      data => {
        console.log("response recieved");
        this.msg = "Registration Successful"
        this._router.navigate(['/login'])
      },
      error => {
        console.log("exception occured");
        console.log(error);
        this.msg = error.error.message;
        this.status = error.error.status;
      }
    )
  }
}

Answer 1

Вся идея состоит в том, чтобы показать детали формы при отправке, нажмите во всплывающем окне и вызовите registerUser () метод из модальной всплывающей кнопки отправки

Добавьте приведенный ниже модальный код в regitration.component. html

 <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Verify Form Details</h4>
          </div>
          <div class="modal-body">
            <p>{{user}}</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default (click)="registerUser()">Submit</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

Запустите созданный выше модал, используя

data-target="#myModal" 

, добавив к кнопке отправки регистрационную форму.

Answer 2

вы можете использовать диалог подтверждения материала для того же. Пожалуйста, найдите ниже код:

1. Я открываю здесь мое диалоговое окно подтверждения от app.component.ts, но вы можете открыть его с вашего registration.component.ts. вот код app.component.ts

import { Component, Inject } from '@angular/core';
import { VERSION, MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import {ConfirmationDialog} from './confirmation-dialog.component';
@Component({
  selector: 'material-app',
  template: `  <p>
    <button mat-button (click)="openDialog('required data to be shown on dialog')">Open Confirm Dialog</button>
  </p>`
})
export class AppComponent {
  version = VERSION;

  constructor(private dialog: MatDialog) {
  }

  openDialog(form_data) {
    const dialogRef = this.dialog.open(ConfirmationDialog,{
      data:{
        message: 'Are you sure want to submit?',
        formData : form_data,
        buttonText: {
          ok: 'submit and continue',
          cancel: 'Edit Details'
        }
      }
    });

    dialogRef.afterClosed().subscribe((confirmed: boolean) => {
// any actions to be performed on close if required
    });
  }
}

добавить требуемый импорт в app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatDialogModule,
} from '@angular/material';
import {AppComponent} from './app.component';
import {ConfirmationDialog} from './confirmation-dialog.component';
/**
 * NgModule that includes all Material modules that are required to serve 
 * the Plunker.
 */
@NgModule({
  exports: [
    MatButtonModule,
    MatButtonToggleModule,
    MatDialogModule,
  ]
})
export class MaterialModule {}

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  declarations: [AppComponent,ConfirmationDialog ],
  entryComponents: [ConfirmationDialog ],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {}

Создать новый компонент для отображения диалога. не забудьте добавить этот компонент в entryComponents app.module.ts.:

import { Component, Inject } from '@angular/core';
import { VERSION, MatDialogRef, MatDialog, MatSnackBar, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'confirmation-dialog',
  template: `<mat-dialog-content>
    <p>
        Display your formdata here:{{formData}}
    </p>
    <p>
        {{message}}
    </p>
</mat-dialog-content>
<mat-dialog-actions align="center">
    <button mat-raised-button color="primary" (click)="onConfirmClick()" tabindex="1">{{confirmButtonText}}</button>
    <button mat-raised-button mat-dialog-close tabindex="-1">{{cancelButtonText}}</button>
</mat-dialog-actions>`,
})
export class ConfirmationDialog {
  message: string = "Are you sure?"
  formData : any;
  confirmButtonText = "Yes"
  cancelButtonText = "Cancel"
  constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<ConfirmationDialog>) {
      if(data){
        this.formData = data.formData;
    this.message = data.message || this.message;
    if (data.buttonText) {
      this.confirmButtonText = data.buttonText.ok || this.confirmButtonText;
      this.cancelButtonText = data.buttonText.cancel || this.cancelButtonText;
    }
      }
  }

  onConfirmClick(): void {
    this.dialogRef.close(true);
    // do further actions as per your requirement such as redirection or something else.
  }

}