Angular 4中如何在ng-bootstrap4模态框嵌入组件并验证响应式表单

看起来你已经迈出了第一步，现在我们把表单抽成独立组件，用ng-bootstrap的模态框服务来加载它，同时切换到Reactive Form实现完整的字段验证逻辑，一步步来：

1. 先把表单抽成独立的MyFormComponent #

把表单逻辑拆成独立组件，不仅方便嵌入模态框，也更符合Angular的组件化思想：

1.1 生成组件（用Angular CLI快速创建） #

ng generate component my-form

1.2 编写my-form.component.ts（Reactive Form + 验证规则） #

这里用FormBuilder构建表单，添加必填、邮箱格式、数字格式等验证规则，同时通过事件发射器和父组件通信：

import { Component, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  @Output() formSubmitted = new EventEmitter<any>(); // 提交成功后传递数据给父组件
  @Output() formClosed = new EventEmitter<void>(); // 关闭表单的通知事件
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单并添加验证规则
    this.myForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      tel_no_1: ['', [Validators.pattern(/^\d{0,4}$/)]],
      tel_no_2: ['', [Validators.pattern(/^\d{0,4}$/)]],
      tel_no_3: ['', [Validators.pattern(/^\d{0,4}$/)]],
      regarding: ['General Question'],
      message: ['', Validators.required]
    });
  }

  // 快捷获取表单控件，方便模板里判断验证状态
  get f() { return this.myForm.controls; }

  onSubmit() {
    // 标记所有控件为已触碰，触发验证提示
    this.myForm.markAllAsTouched();

    if (this.myForm.valid) {
      // 合并电话号码为完整字符串
      const formData = {
        ...this.myForm.value,
        telephone: `${this.myForm.value.tel_no_1}-${this.myForm.value.tel_no_2}-${this.myForm.value.tel_no_3}`
      };
      this.formSubmitted.emit(formData); // 把数据传给父组件
      this.myForm.reset(); // 重置表单
    }
  }

  onClose() {
    this.formClosed.emit();
  }
}

1.3 编写my-form.component.html（带验证提示的表单模板） #

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="field1" class="row">
      <span class="col-sm-4">Name <span class="required text-danger">*</span></span>
      <input type="text" class="form-control col-sm-8 input-field" formControlName="username" />
      <!-- 必填错误提示 -->
      <div class="col-sm-8 offset-sm-4 text-danger mt-1" *ngIf="f.username.touched && f.username.invalid">
        <small>Name is required</small>
      </div>
    </label>
  </div>

  <div class="form-group">
    <label for="field2" class="row">
      <span class="col-sm-4">Email <span class="required text-danger">*</span></span>
      <input type="text" class="input-field form-control col-sm-8" formControlName="email" />
      <!-- 邮箱验证错误提示 -->
      <div class="col-sm-8 offset-sm-4 text-danger mt-1" *ngIf="f.email.touched && f.email.invalid">
        <small *ngIf="f.email.errors.required">Email is required</small>
        <small *ngIf="f.email.errors.email">Please enter a valid email address</small>
      </div>
    </label>
  </div>

  <div class="form-group">
    <label class="row">
      <span class="col-sm-4">Telephone</span>
      <input type="text" class="col-sm-2 tel-number-field form-control" formControlName="tel_no_1" maxlength="4" />-
      <input type="text" class="col-sm-2 tel-number-field form-control" formControlName="tel_no_2" maxlength="4" />-
      <input type="text" class="col-sm-2 tel-number-field form-control" formControlName="tel_no_3" maxlength="4" />
      <!-- 电话号码格式错误提示 -->
      <div class="col-sm-8 offset-sm-4 text-danger mt-1" *ngIf="(f.tel_no_1.touched || f.tel_no_2.touched || f.tel_no_3.touched) && (f.tel_no_1.invalid || f.tel_no_2.invalid || f.tel_no_3.invalid)">
        <small>Please enter valid numbers (max 4 digits per segment)</small>
      </div>
    </label>
  </div>

  <div class="form-group">
    <label for="field4" class="row">
      <span class="col-sm-4">Regarding</span>
      <select formControlName="regarding" class="form-control col-sm-8 select-field">
        <option value="General Question">General</option>
        <option value="Advertise">Advertisement</option>
        <option value="Partnership">Partnership</option>
      </select>
    </label>
  </div>

  <div class="form-group">
    <label for="field5" class="row">
      <span class="col-sm-4">Message <span class="required text-danger">*</span></span>
      <textarea formControlName="message" class="form-control col-sm-8 textarea-field"></textarea>
      <!-- 消息必填提示 -->
      <div class="col-sm-8 offset-sm-4 text-danger mt-1" *ngIf="f.message.touched && f.message.invalid">
        <small>Message is required</small>
      </div>
    </label>
  </div>

  <div class="d-flex justify-content-end mt-3">
    <button type="button" class="btn btn-danger mr-2" (click)="onClose()">Close</button>
    <button class="btn" style="background-color: #182c3a; color:white" type="submit">Submit</button>
  </div>
</form>

2. 在AppComponent中用ng-bootstrap模态框加载表单组件 #

先确保你已经安装了ng-bootstrap（如果没装，执行npm install @ng-bootstrap/ng-bootstrap bootstrap@4，然后在app.module.ts导入NgbModule）

2.1 修改app.component.ts #

用NgbModal服务打开模态框，监听子组件的提交和关闭事件，处理数据输出：

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyFormComponent } from './my-form/my-form.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}

  openFormModal() {
    // 打开模态框并加载MyFormComponent
    const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
    
    // 监听表单提交事件，输出数据到控制台
    modalRef.componentInstance.formSubmitted.subscribe((formData) => {
      console.log('Submitted Form Data:');
      console.log(formData);
      modalRef.close(); // 验证通过后关闭模态框
    });

    // 监听表单关闭事件
    modalRef.componentInstance.formClosed.subscribe(() => {
      modalRef.close();
    });
  }
}

2.2 修改app.component.html #

去掉原生Bootstrap的模态框代码，换成触发ng-bootstrap模态框的按钮：

<div class="container mt-4">
  <h2>Open Form Modal</h2>
  <button type="button" class="btn btn-primary" (click)="openFormModal()">
    Open Form
  </button>
</div>

3. 配置app.module.ts #

确保导入所有必要的模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { MyFormComponent } from './my-form/my-form.component';

@NgModule({
  declarations: [
    AppComponent,
    MyFormComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule, // 必须导入才能使用Reactive Form
    NgbModule // 导入ng-bootstrap模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

核心要点说明 #

• 组件嵌入模态框：ng-bootstrap的NgbModal.open()方法可以直接传入组件类，自动把组件渲染到模态框主体里，不需要手动编写模态框的HTML结构。
• Reactive Form验证：通过Validators添加规则，模板里通过控件的touched和invalid状态触发错误提示，提交时先标记所有控件为已触碰，确保用户看到所有验证问题。
• 父子组件通信：用@Output事件发射器把表单数据和关闭事件从子组件传给父组件，父组件负责处理模态框关闭和数据输出逻辑。

内容的提问来源于stack exchange，提问作者sumit