在Angular2/4中创建错误组件

我是个新手，我被困住了

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

就像当用户没有填写必填字段并点击提交时，会出现一个模式，告诉我们出错的地方

如何创建错误模式？我想为这个错误创建一个新的组件，因为我想能够在不同的页面上使用这个组件

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

---

我无法将屏幕截图粘贴到我的评论中，因此这里是我所说内容的图片

角度模板驱动和角度反应窗体都设置为显示此类错误消息

要回答你的问题。。。这里有一个创建模型的示例：

或者，您可以在此处使用材质设计的模式：

在模板中：

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

---

使用命名路由器出口，您可以相当轻松地创建引导模式：

app.component.html

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

要触发模态，请创建链接：

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

要关闭对话框，请执行以下操作：

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

---

如果要在Submit上显示任何错误，可以使用与angular2最兼容的“材质设计”对话框

下面是代码链接和如何打开对话框的运行示例

以下是材料设计中莫代尔官方文件的链接

---

希望这能对你有所帮助：）

只是一个意见。。。从用户的角度来看，在模式中显示错误对用户不是很友好。如果存在多个错误，用户必须记住列表，然后关闭模式以修复每个错误。似乎构建一个可以添加到任何页面以显示错误的错误组件会更友好。或者只是在字段旁边添加错误。我喜欢创建错误组件的想法，但是如何确保在出现错误时组件显示出来？我创建了一个名为errormodal的组件。我应该如何处理onSubmit（），以确保出现错误时，组件会显示出来？我希望我有道理。谢谢！！我将在下面更新我的答案。

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 {
}

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

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 }}]);
}