Creating a error component in Angular2/4

Question

I'm fairly new to Angular and I am stuck.

I have a form which when a user doesn't fill the required fields gives an error on submit. Instead of giving an error on the page (like the attachment), I want this error to show up on a modal.

Like when a user doesn't fill the required fields and hit submits, a modal appears giving us the error telling us what went wrong.

How would I create an error modal? I want to create a new component for this error because I want to be able to use this component on various pages.

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

error

Just an opinion ... from a user's perspective displaying the errors in a modal is not very user friendly. If there are several errors, the user has to memorize the list and then close the modal to fix each one. Seems like it would be friendlier to build an error component that you could add to any page to display errors. Or just add the errors next to the fields. — DeborahK
– DeborahK, Commented Dec 14, 2017 at 0:37
I like the idea of creating an error component but how do I make sure that the component shows up when there's an error? I created a component called error-modal. What should I do on my onSubmit() to make sure that when there is an error, the component shows up? I hope I make sense. And Thanks!! — abidishajia
– abidishajia, Commented Dec 14, 2017 at 0:55

DeborahK · Accepted Answer · 2017-12-14 01:13:16Z

2

I can't paste a screen shot into my comment, so here is a picture of what I'm talking about.

Both Angular template-driven and Angular reactive forms are set up to display error messages such as these.

To actually answer your question ... there is an example of creating a model here: http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

Or you can use material design's modal here: https://material.angular.io/components/dialog/overview

In the template:

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

In the component:

isError: boolean

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

edited Dec 14, 2017 at 1:13

answered Dec 14, 2017 at 0:40

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Kang · Accepted Answer · 2017-12-14 01:30:00Z

Using named router-outlets, you can create a bootstrap modal fairly easily:

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

To trigger the modal, create a link:

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

Or inject router and navigate to 'open':

constructor(private router: Router) {
}

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

To close the dialog:

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

Or

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

Ashish Sharma · Accepted Answer · 2017-12-14 06:22:19Z

0

If you want to show any error on onSubmit then you can use material design dialog which is best compatible with angular2.

below is the link for the code and running example that how you can open dialog Click here for demo code

below is the link for official doc of Modal in material design

Check official doc for dialog in Angular2

Hope this will help you :)

answered Dec 14, 2017 at 6:22

Ashish Sharma

6796 silver badges14 bronze badges

Collectives™ on Stack Overflow

Creating a error component in Angular2/4

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related