angular 使用bootstratp模态框+响应式表单+响应式表单的验证+子窗关闭父窗口刷新...

﹏ヽ暗。殇╰゛Y 2021-12-14 17:15 407阅读 0赞

This is quite big project today![1101941-20171108175812591-1183863961.png][]

这次有以下几个功能：

1.ng-bootstrap模态框

2.响应式表单

3.响应式表单的验证

4.子窗关闭父窗口刷新

其实这几个哪一个都能写一个话题，事情太多了，时间紧任务重，一起写了吧：

ng-bootstrap模态框所需要的条件（very very important）,如果写错，查错非常的难哦，请慎重【反正我看不懂错误提示，出个错解决老办天】。

1.package.json加入dependencies： "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3", 也可以使用安装命令。

2.systemjs.config.js 加入map: '@ng-bootstrap/ng-bootstrap': 'node\_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

3.app.module.tx 加入import \{ NgbModule \} from '@ng-bootstrap/ng-bootstrap'; 然后 imports: \[NgbModule.forRoot()\] //<--模态窗 【这个主module文件我分离开了几个子module】

4.app.module.tx 加入 entryComponents: \[NgbmodalSubComponent\] 【这是需要弹出的子窗口】

响应式表单所需要的条件

1.import \{ FormsModule, ReactiveFormsModule \} from '@angular/forms'; 然后 imports: \[FormsModule,ReactiveFormsModule,\]

2017.11.30增加

设置html控件的值. 因为很多时候需要做很多处理之后设置值,所以在createfrom时不能得到数据,或者不方便赋值.

//【patchValue设置部分控件的值】 【setValue(\{\}) 需要设置全部表单中的值，如果缺少会报错】  
this.heroForm.patchValue(\{ firstname: 'firstname2' \});

\--------------------------------------------以下是功能部分-------------------------------------------------------

Module文件

1 import { NgModule, } from '@angular/core';
     2 import { BrowserModule } from '@angular/platform-browser';
     3 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     4 import { NgbModalComponent } from './ngbmodal.component';
     5 import { NgbmodalSubComponent } from './ngbmodal-sub.component';
     6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <-- NgModel lives here 双向绑定
     7 @NgModule({
     8     imports: [
     9         BrowserModule,
    10         NgbModule.forRoot(), //<--模态窗
    11         FormsModule,
    12         ReactiveFormsModule,
    13     ],
    14     declarations: [
    15         NgbModalComponent,
    16         NgbmodalSubComponent,
    17     ],
    18     entryComponents: [NgbmodalSubComponent]
    19 })
    20 
    21 export class NgbmodalModule { }

父窗口：

1 import { Component, OnInit, Output } from '@angular/core';
     2 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
     3 import { NgbmodalSubComponent } from './ngbmodal-sub.component';
     4 
     5 @Component({
     6     selector: 'ngbmodalcomponent',
     7     templateUrl: 'app/app-ngbmodal/ngbmodal.component.html',
     8     providers: [NgbmodalSubComponent]
     9 })
    10 
    11 export class NgbModalComponent implements OnInit {
    12     title = "NgbModalComponent";
    13     srefresh: string;
    14     delay: number = 1000;
    15     isLoading: boolean = false;
    16     constructor(private myNgbModal: NgbModal) { }
    17 
    18     ngOnInit(): void {
    19 
    20     }
    21     open() {
    22         const modalRef = this.myNgbModal.open(NgbmodalSubComponent, { windowClass: 'dark-modal', size: 'lg' });
    23         //传给子窗口的值
    24         modalRef.componentInstance.name = '传值';
    25         //then回调，得到子窗口的返回的值。
    26         modalRef.result.then((result) => {            
    27             //只有返回ok才刷新父窗口
    28             if (result == 'ok') {
    29                 this.refresh();
    30             }
    31         })
    32     }
    33     //等待3秒钟之后在处理之后的逻辑【某些特殊需要，可以忽略】
    34     refresh() {
    35         this.isLoading = true;
    36         this.srefresh = '';
    37         setTimeout(() => {
    38             this.srefresh = "刷新成功" + new Date();
    39             this.isLoading = false;
    40         }, this.delay * 3);
    41 
    42     }
    43 }

1 {
         {title}}
    2 <div>
    3     窗口{
         {srefresh}}
    4     <br />
    5     <input type="button" (click)="open()" value=" open " />
    6 
    7     <input type="button" (click)="refresh()" value=" 刷新 " />
    8 </div>

子窗口：

1 import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
     2 import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
     3 import { FormControl, FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
     4 
     5 @Component({
     6     selector: 'NgbmodalSubComponent',
     7     templateUrl: 'app/app-ngbmodal/ngbmodal-sub.component.html'
     8 })
     9 export class NgbmodalSubComponent implements OnInit {
    10 
    11     @Input() name: string;
    12     heroForm: FormGroup;
    13 
    14     constructor(public myNgbActiveModal: NgbActiveModal, private fb: FormBuilder) {    }
    15 
    16     ngOnInit(): void {
    17         this.createForm();
    18     }
    19 
    20     createForm() {
    21         this.heroForm = this.fb.group({ //使用fromBuilder只是单纯简化了程序的，可以使用fromGorup 和fromControl的组合。
    22             firstname: ['', [Validators.required, Validators.minLength(3)]],//多个验证参数
    23             lastname: ['', [Validators.required, this.skuValidator]],
    24             email: ['', this.emailValidator],//可空可以通过或者邮箱验证，如果使用Validators.emaill 不能证验空值，等于必填，所以要单写一个正则表达式
    25             age: ['', this.ageValidator],
    26         });
    27     }
    28     ageValidator(control: FormControl): { [s: string]: boolean } {
    29         if (!control.value.match(/^$|^[0-9]*$/)) {
    30             return { invalidage: true };
    31         }
    32     }
    33 
    34     skuValidator(control: FormControl): { [s: string]: boolean } {
    35         if (!control.value.match(/^$|^123/)) {
    36             return { invalidSku: true };
    37         }
    38     }
    39 
    40     emailValidator(control: FormControl): { [s: string]: boolean } {
    41         //【^$|】 这三个字符表示【可空或者】
    42         if (!control.value.match(/^$|^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)) {
    43             return { invalidemail: true };
    44         }
    45     }
    46     onSubmit(): void {
    47         console.log("firstname=", this.heroForm.value.firstname);
    48         this.myNgbActiveModal.close('ok');
    49     }
    50 
    51     close(str: string) {
    52         this.myNgbActiveModal.close(str);//关闭子窗口时，主窗口的then方法才工作，否则一直等待。
    53     }
    54 }

html

1 <div class="modal-header">
     2     <h4 class="modal-title">Hi there!</h4>
     3     <button type="button" class="close" aria-label="Close" (click)="close('Cross X')">
     4         <span aria-hidden="true">×</span>
     5     </button>
     6 </div>
     7 <form [formGroup]="heroForm" #formDir="ngForm" (ngSubmit)="onSubmit()" novalidate>
     8     <div class="modal-body">
     9         <p>Hello {
        {name}}!</p>
    10         <div class="form-group">
    11             <label class="center-block">
    12                 firstname:
    13                 <input class="form-control" formControlName="firstname" >
    14             </label>
    15             
    16             <div *ngIf="heroForm.get('firstname').invalid && (heroForm.get('firstname').dirty || heroForm.get('firstname').touched)"
    17                  class="alert alert-danger">
    18                 <div *ngIf="heroForm.get('firstname').errors.required">
    19                     firstname is required.
    20                 </div>
    21                 <div *ngIf="heroForm.get('firstname').errors.minlength">
    22                     Name must be at least 3 characters long.
    23                 </div>
    24 
    25             </div>
    26         </div>
    27         <div class="form-group">
    28             <label class="center-block">
    29                 lastname:
    30                 <input class="form-control" formControlName="lastname">
    31             </label>
    32             <div *ngIf="heroForm.get('lastname').invalid && (heroForm.get('lastname').dirty || heroForm.get('lastname').touched)"
    33                  class="alert alert-info">
    34                 <div *ngIf="heroForm.get('lastname').errors.required">
    35                     Lastname is required.
    36                 </div>
    37                 <div *ngIf="heroForm.get('lastname').errors.invalidSku">
    38                     Must is 123 start.
    39                 </div>
    40             </div>
    41         </div>
    42 
    43         <div class="form-group">
    44             <label class="center-block">
    45                 age:
    46                 <input class="form-control" formControlName="age">
    47             </label>
    48             <div *ngIf="heroForm.get('age').invalid && (heroForm.get('age').dirty || heroForm.get('age').touched)"
    49                  class="alert alert-warning">
    50                 <div *ngIf="heroForm.get('age').errors.invalidage">
    51                     age format is incorrect
    52                 </div>
    53             </div>
    54         </div>
    55 
    56         <div class="form-group">
    57             <label class="center-block">
    58                 email:
    59                 <input class="form-control" formControlName="email">
    60             </label>
    61             <div *ngIf="heroForm.get('email').invalid && (heroForm.get('email').dirty || heroForm.get('email').touched)"
    62                  class="alert alert-warning">
    63                 <div *ngIf="heroForm.get('email').errors.invalidemail">
    64                     email format is incorrect
    65                 </div>
    66             </div>
    67         </div>
    68     </div>
    69     <div class="modal-footer">
    70         <button type="submit" class="btn btn-outline-dark"
    71                 [disabled]="heroForm.invalid">
    72             Submit
    73         </button>
    74         
    78         <button type="button" class="btn btn-outline-dark" (click)="close('Close click')">Close</button>
    79     </div>
    80 </form>

最后效果图：

![1101941-20171109093618294-718056346.png][]

![1101941-20171109093629856-1286561173.png][]

![1101941-20171109093718809-1209844892.png][]

![1101941-20171109093858450-882128742.png][]

![1101941-20171109093757294-216265906.png][]

等有空的时候，我会补写一些注解。That's all.

转载于:https://www.cnblogs.com/cxd1008/p/7805497.html

[1101941-20171108175812591-1183863961.png]: /images/20211214/7e629cbade234284a32ca7f4ab4dbebd.png
[1101941-20171109093618294-718056346.png]: /images/20211214/7c2d3b8f2a054162b2077141fed407dd.png
[1101941-20171109093629856-1286561173.png]: /images/20211214/26c3e7bab46348dc80b6a341e3b2c22a.png
[1101941-20171109093718809-1209844892.png]: /images/20211214/33515fd702d5453caf21d07bc1c3194b.png
[1101941-20171109093858450-882128742.png]: /images/20211214/1c1e230abb754d27bce66955579395ca.png
[1101941-20171109093757294-216265906.png]: /images/20211214/9845a9ba3edf470dbfec03719c770ca9.png