如何验证我的角度形式并在弹出模式中显示我的内容？

Question

我正在尝试将我的角度应用验证为弹出模式，但在应用验证后，表单内容消失， 下面是模式形式的屏幕截图，在验证之前和之后

我在哪里做错了或者代码有什么问题？ 我该如何解决这个问题？

或者，如果有人拥有带表单验证的Angular bootstrap模态表单的示例代码，请分享代码，TIA

我的HTML内容

<button type="button" class="btn btn-info waves-effect m-b-10" (click)="openMyModal('effect-13')">
  <i class="flag flag-icon-background flag-icon-INR"></i>Type 1</button>
  <!-- multi modal -->
  <button type="button" class="btn btn-success waves-effect m-b-10" (click)="modalMulti1.show()">Type 2</button>
  <!-- modal 1 -->
  <app-modal-basic #modalMulti1>
     <form [formGroup]="modalForm1">
        <div class="app-modal-header" data-backdrop="static" data-keyboard="false">
           <h4 class="modal-title">Modal 1</h4>
           <button type="button" class="close basic-close" (click)="modalMulti1.hide()">
           <span aria-hidden="true">&times;</span>
           </button>
        </div>
        <div class="app-modal-body" data-backdrop="static" data-keyboard="false">
           <div class="row">
              <div class="col-sm-12">
                 <h4 class="sub-title">First Name</h4>
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md" formControlName="fname"  placeholder="First name" type="text">
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('fname').hasError('required') && modalForm1.get('fname').touched">First name is required.</span>
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('fname').hasError('minlength') && modalForm1.get('fname').touched">Minimum 2 characters.</span>
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('fname').hasError('maxlength') && modalForm1.get('fname').touched">Maximum 15 characters.</span>
                       <span class="text-success text-small block" *ngIf="modalForm1.get('fname').touched && modalForm1.get('fname').valid">Ok!</span>
                    </div>
                 </div>
              </div>
              <div class="col-sm-12">
                 <h4 class="sub-title">Last Name</h4>
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md" formControlName="lname"   placeholder="Last name" type="text">
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('lname').hasError('required') && modalForm1.get('lname').touched">Last name is required.</span>
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('lname').hasError('minlength') && modalForm1.get('lname').touched">Minimum 2 characters.</span>
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('lname').hasError('maxlength') && modalForm1.get('lname').touched">Maximum 15 characters.</span>
                       <span class="text-success text-small block" *ngIf="modalForm1.get('lname').touched && modalForm1.get('lname').valid">Ok!</span>
                    </div>
                 </div>
              </div>
              <div class="col-sm-12">
                 <h4 class="sub-title">Email</h4>
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md" formControlName="email"  placeholder="Email" type="text">
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('email').hasError('required') && modalForm1.get('email').touched">Email is required.</span>
                       <span class="text-danger text-small block" *ngIf="modalForm1.get('email').hasError('pattern') && modalForm1.get('email').touched">Invalid Email id.</span>
                       <span class="text-success text-small block" *ngIf="modalForm1.get('email').touched && modalForm1.get('email').valid">Ok!</span>
                    </div>
                 </div>
              </div>
              <div class="col-sm-12">
                 <h4 class="sub-title">Gender</h4>
                 <div class="form-radio">
                    <div class="radio radio-inline">
                       <label>
                       <input value="male" formControlName="gender"  name="gender" type="radio">
                       <!-- [(ngModel)]="item.gender" -->
                       <i class="helper"></i>Male
                       </label>
                    </div>
                    <div class="radio radio-inline">
                       <label>
                       <input value="female" formControlName="gender" name="gender" type="radio">
                       <i class="helper"></i>Female
                       </label>
                    </div>
                 </div>
              </div>
           </div>
        </div>
        <div class="app-modal-footer">
           <button type="button" class="btn btn-default waves-effect " (click)="modalMulti1.hide()">Close</button>
           <button type="button" data-toggle="modal"  (click)="modalMulti2.show(); modalMulti1.hide(); showmodel1();" class="btn btn-primary waves-effect waves-light">Next</button>
        </div>
     </form>
  </app-modal-basic>
  <!-- modal 2 -->
  <app-modal-basic #modalMulti2>
     <div class="app-modal-header">
        <h4 class="modal-title">Modal 2 {{item | json}}</h4>
        <button type="button" class="close basic-close" (click)="modalMulti2.hide()">
        <span aria-hidden="true">&times;</span>
        </button>
     </div>
     <div class="app-modal-body">
        <div class="row">
           <div class="col-sm-12">
              <h4 class="sub-title">Org</h4>
              <form>
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md"  placeholder="Org" type="text">
                    </div>
                 </div>
              </form>
           </div>
           <div class="col-sm-12">
              <h4 class="sub-title">Branch</h4>
              <form>
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md"  placeholder="Branch" type="text">
                    </div>
                 </div>
              </form>
           </div>
           <div class="col-sm-6">
              <h4 class="sub-title">Cabinet Access</h4>
              <ui-switch checked="" class="js-single" color="#4680ff" size="medium" switchcolor="#fff" _nghost-c13="" ng-reflect-checked=""
                 ng-reflect-size="medium" ng-reflect-color="#4680ff" ng-reflect-switch-color="#fff">
                 <span class="switch switch-medium" style="background-color: rgb(255, 255, 255); border-color: rgb(223, 223, 223);">
                 <small style="background: rgb(255, 255, 255);">
                 </small>
                 </span>
              </ui-switch>
           </div>
           <div class="col-sm-6">
              <h4 class="sub-title">Web Access</h4>
              <ui-switch checked="" class="js-single" color="#4680ff" size="medium" switchcolor="#fff" _nghost-c13="" ng-reflect-checked=""
                 ng-reflect-size="medium" ng-reflect-color="#4680ff" ng-reflect-switch-color="#fff">
                 <span class="switch switch-medium" style="background-color: rgb(255, 255, 255); border-color: rgb(223, 223, 223);">
                 <small style="background: rgb(255, 255, 255);">
                 </small>
                 </span>
              </ui-switch>
           </div>
        </div>
     </div>
     <div class="app-modal-footer">
        <button type="button" class="btn btn-default waves-effect" (click)="modalMulti2.hide(); modalMulti1.show();">Previous</button>
        <button data-toggle="modal" (click)="modalMulti2.hide(); modalMulti3.show();" class="btn btn-primary">Next</button>
     </div>
  </app-modal-basic>
  <!-- modal 3 -->
  <app-modal-basic #modalMulti3>
     <div class="app-modal-header">
        <h4 class="modal-title">Modal 3<br> 1st Model Data:{{item | json}} <br>2nd Model Data:{{item2 | json}}<br> 3rd Model Data:{{item3 | json}}</h4>
        <button type="button" class="close basic-close" (click)="modalMulti3.hide()">
        <span aria-hidden="true">&times;</span>
        </button>
     </div>
     <div class="app-modal-body">
        <div class="row">
           <div class="col-sm-12">
              <h4 class="sub-title">Country</h4>
              <form>
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md"  placeholder="Country" type="text">
                    </div>
                 </div>
              </form>
           </div>
           <div class="col-sm-12">
              <h4 class="sub-title">Default Select</h4>
              <select class="form-control form-control-default" name="select" >
              <option value="opt1" ng-reflect-value="opt1">Select One Value Only</option>
              <option value="opt2" ng-reflect-value="opt2">Type 2</option>
              <option value="opt3" ng-reflect-value="opt3">Type 3</option>
              <option value="opt4" ng-reflect-value="opt4">Type 4</option>
              <option value="opt5" ng-reflect-value="opt5">Type 5</option>
              <option value="opt6" ng-reflect-value="opt6">Type 6</option>
              <option value="opt7" ng-reflect-value="opt7">Type 7</option>
              <option value="opt8" ng-reflect-value="opt8">Type 8</option>
              </select>
           </div>
        </div>
     </div>
     <div class="app-modal-footer">
        <button type="button" class="btn btn-default waves-effect" (click)="modalMulti3.hide(); modalMulti2.show();">Previous</button>
        <button data-toggle="modal" (click)="modalMulti3.hide(); saveData(item);" class="btn btn-primary waves-effect">Save</button>
     </div>
  </app-modal-basic>
  <app-modal-animation [modalID]="'effect-13'" [modalClass]="'md-effect-13'">
  <h3 class="f-26">First Step</h3>
  <div class="text-center">
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Full Name">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon2">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Email">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Position">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon4">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Office">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon5">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="number" class="form-control" placeholder="Age">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon6">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Phone Number">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon7">
        <i class="icofont icofont-user"></i>
        </span>
        <input id="dropper-default" class="form-control" type="text" placeholder="Select Your Birth Date" readonly="readonly">
     </div>
     <button type="button" (click)="closeMyModal($event); openMyModal('effect-14');" class="btn btn-primary waves-effect m-r-20 f-w-600 d-inline-block">Next</button>
     <button (click)="closeMyModal($event)" class="btn btn-danger waves-effect m-r-20 f-w-600 md-close d-inline-block">Close</button>
  </div>
  <button (click)="closeMyModal($event)" aria-label="Close" class="md-close-btn">
  <i class="icofont icofont-ui-close"></i>
  </button>
  </app-modal-animation>
  <app-modal-animation [modalID]="'effect-14'" [modalClass]="'md-effect-14'">
  <h3 class="f-26">Second Step</h3>
  <div class="text-center">
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Full Name">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon2">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Email">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Position">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon4">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Office">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon5">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="number" class="form-control" placeholder="Age">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon6">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Phone Number">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon7">
        <i class="icofont icofont-user"></i>
        </span>
        <input id="dropper-default" class="form-control" type="text" placeholder="Select Your Birth Date" readonly="readonly">
     </div>
     <button type="button" (click)="closeMyModal($event); openMyModal('effect-15');" class="btn btn-primary waves-effect m-r-20 f-w-600 d-inline-block">Next</button>
     <button (click)="closeMyModal($event); openMyModal('effect-13');" class="btn btn-danger waves-effect m-r-20 f-w-600 md-close d-inline-block">Previous</button>
  </div>
  <button (click)="closeMyModal($event)" aria-label="Close" class="md-close-btn">
  <i class="icofont icofont-ui-close"></i>
  </button>
  </app-modal-animation>
  <app-modal-animation [modalID]="'effect-15'" [modalClass]="'md-effect-15'">
  <h3 class="f-26">Third Step</h3>
  <div class="text-center">
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Full Name">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon2">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Email">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Position">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon4">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Office">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon5">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="number" class="form-control" placeholder="Age">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon6">
        <i class="icofont icofont-user"></i>
        </span>
        <input type="text" class="form-control" placeholder="Phone Number">
     </div>
     <div class="input-group">
        <span class="input-group-addon" id="basic-addon7">
        <i class="icofont icofont-user"></i>
        </span>
        <input id="dropper-default" class="form-control" type="text" placeholder="Select Your Birth Date" readonly="readonly">
     </div>
     <button type="button" (click)="closeMyModal($event)" class="btn btn-primary waves-effect m-r-20 f-w-600 d-inline-block">Save</button>
     <button (click)="closeMyModal($event); openMyModal('effect-14');" class="btn btn-danger waves-effect m-r-20 f-w-600 md-close d-inline-block">Previous</button>
  </div>
  <button (click)="closeMyModal($event)" aria-label="Close" class="md-close-btn">
  <i class="icofont icofont-ui-close"></i>
  </button>
  </app-modal-animation>
  <ng2-toasty [position]="position"></ng2-toasty>

component.ts的某些部分

import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {ToastData, ToastOptions, ToastyService} from 'ng2-toasty';
import {transition, trigger, style, animate} from '@angular/animations';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import swal from 'sweetalert2';


@Component({
  selector: 'app-popup-wizard',
  templateUrl: './popup-wizard.component.html'
})

export class PopupWizardComponent implements OnInit {

  modalForm1: FormGroup;


  constructor() {}

  ngOnInit() {
    this.checkForm();
  }

  private checkForm() {
    this.modalForm1 = new FormGroup({
      fname: new FormControl('Asif', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]),
      lname: new FormControl('', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]),
      email: new FormControl('', [Validators.required,
                            Validators.pattern(/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/)]),
      gender: new FormControl('',Validators.required)

    });
  }

  public showmodel1() {
    console.log(this.modalForm1.value);
  }

Answer 1

好吧，我们刚从

交换了这些行

  <!-- modal 1 -->
  <app-modal-basic #modalMulti1>
     <form [formGroup]="modalForm1">

到

  <!-- modal 1 -->
  <form [formGroup]="modalForm1">
      <app-modal-basic #modalMulti1>

这可行。