在 Angular2/4 中创建错误组件

Question

我是 Angular 的新手，我被卡住了。

我有一个表单，当用户没有填写必填字段时，提交时会出现错误。而不是在页面上给出错误（如附件），我希望这个错误显示在模态上。

就像当用户没有填写必填字段并点击提交时，出现一个模式给我们错误告诉我们出了什么问题。

如何创建错误模式？我想为这个错误创建一个新组件，因为我希望能够在各种页面上使用这个组件。

onSubmit() {
  //do something 
  }, err => {
     //How would I make my error component open when there is an error here.
     console.log("err");
  }
}

error

Answer 1

我无法将屏幕截图粘贴到我的评论中，所以这是我正在谈论的图片。

Angular 模板驱动和 Angular 响应式表单都设置为显示此类错误消息。

实际回答你的问题......这里有一个创建模型的例子：http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

或者您可以在此处使用 material 设计模式：https://material.angular.io/components/dialog/overview

在模板中：

<my-error-component *ngIf="isError"></my-error-component>

在组件中：

isError: boolean

onSubmit() {
  //do something 
  }, err => {
     isError = true;
     console.log("err");
  }
}

Answer 2

使用命名路由器插座，您可以很容易地创建一个 bootstrap 模式：

app.component.html

<router-outlet name="modal"></router-outlet>

modal.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'modal',
    template: `
    <div class="modal fade in show" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>One fine body&hellip;</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  <div class="modal-backdrop fade in"></div>
    `
})

export class ModalComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

app.module.ts

import { RouterModule } from '@angular/router';
import { ModalComponent } from './modal.component';


@NgModule({
  imports:      [
    BrowserModule, 
    RouterModule.forRoot(
      [{ path: 'open',  component: ModalComponent, outlet: 'modal'}]
    )
  ],
  declarations: [ AppComponent, ModalComponent ],
  bootstrap:    [ AppComponent ],
  exports: [AppComponent]
})
export class AppModule {
}

要触发模态，请创建一个 link：

<a [routerLink]="[{ outlets: { modal:'open' }}]">Click Me</a>

或者注入路由器并导航到 'open':

constructor(private router: Router) {
}

openDialog() {
    this.router.navigate([{ outlets: { modal:'open' }}]);
}

关闭对话框：

<a [routerLink]="[{ outlets: { modal:null }}]">Click Me</a>

或

closeDialog() {
    this.router.navigate([{ outlets: { modal: null }}]);
}

Answer 3

如果你想在 onSubmit 上显示任何错误，那么你可以使用 material 与 angular2 最兼容的设计对话框。

下面是代码的 link 和如何打开对话框的运行示例 Click here for demo code

下面是linkmaterial设计中Modal的官方文档

Check official doc for dialog in Angular2

希望这对您有所帮助:)

在 Angular2/4 中创建错误组件

Creating a error component in Angular2/4

angular2-template

angular