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

或者你可以在这里使用材料设计的模态：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

使用命名路由器插座，您可以非常轻松地创建引导模式：

<强> app.component.html

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

<强> modal.component.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 {
}

<强> app.module.ts

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

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

constructor(private router: Router) {
}

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

或者注入路由器并导航到＆＃39;打开＆＃39;：

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

关闭对话框：

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

或者

static void Main(string[] args) {
    //variable declarations
    const int SIZE = 26;
    char[]
    alpha = new char[SIZE];
    //function calls
    FillAlpha(alpha);
    Console.WriteLine("Print Original List A-Z:");
    PrintAlpha(alpha);
    ReverseAlpha(alpha);
    Console.WriteLine("\nPrint Reversed List Z-A:");
    PrintAlpha(alpha);
    Console.Write("\n\nPress any key to continue:");
    Console.ReadKey();
}

static void FillAlpha(char[] letters) {
    for (int i = 0; i < 26; i++) {
        letters[i] = (char)(i + 65);
    }
}

static void PrintAlpha(char[] letters) {
    foreach(char c in letters)
    Console.Write(c + " ");
    Console.WriteLine();
}

static void ReverseAlpha(char[] letters) {
    char a, b, temp;
    temp = a;
    a = b;
    b = temp:
}

Answer 3

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

下面是代码和运行示例的链接，了解如何打开对话框 Click here for demo code

下面的

是材料设计中Modal官方文档的链接

Check official doc for dialog in Angular2

希望这会对你有所帮助:)。

在Angular2 / 4中创建错误组件

3 个答案: