Introducing a break in the middle of the phrase [Angular JS]

I'm currently working on an Angular application. In one particular scenario, when a user attempts to change their password, a service call is made that will return multiple error messages in a single response if the password change was unsuccessful. The response looks something like this:

Password should meet the policy. Previous password cannot be reused. Both New and Confirm passwords should match. Password is too short.

How can I insert a new line after each period (.) so that I can display the error messages on separate lines rather than together?

JavaScript Code

function (errorData) {
    $ctrl.errorMessage = errorData.data.error;
        $mdToast.show(
            $mdToast.simple()
                .textContent($ctrl.errorMessage)                       
                .hideDelay(3000)
            );
});

Answer №1

Here is a different approach

  $mdToastProvider.addPreset('customPreset', {
      options: function() {
        return {
          template:
            '<md-toast>' +
              '<div class="md-toast-content">' +
                'This is a unique custom preset' +
              '</div>' +
            '</md-toast>',
          controllerAs: 'toast',
          bindToController: true
        };
      }
    });

    $mdToast.show(
      $mdToast.customPreset()
    );

For additional details, check out https://material.angularjs.org/latest/api/service/$mdToast

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending AJAX Responses as Properties to Child Component

Currently, I am working on building a blog using React. In my main ReactBlog Component, I am making an AJAX call to a node server to get back an array of posts. My goal is to pass this post data as props to different components. One specific component I h ...

Mastering the art of completing a form using AJAX

I'm working on a checkbox that triggers AJAX to create a new log. It populates the necessary information and automatically clicks the "create" button. However, I'm facing an issue where the hour value is not changing. Any help on what I might be ...

An object will not be returned unless the opening curly bracket is positioned directly next to the return statement

compClasses: function() { /* The functionality is different depending on the placement of curly brackets */ return { major: this.valA, minor: this.valB } /* It works like this, please pay attention to ...

Middleware in Express.js designed to alter the response object

One method I'd like to explore is using middleware functions to alter the response. app.use(function(request, response, next) { .. do something .. next(); // moves to next middleware }); When it comes to modifying the request and response ob ...

Exploring the contrast of && and ?? in JavaScript

My current focus is on utilizing the Logical AND && and Nullish coalescing operator ?? in handling conditional rendering of variables and values. However, I find myself struggling to fully comprehend how these operators function. I am seeking clar ...

iOS devices do not support the add/removeClass function

This code functions properly on desktop browsers, but encounters issues when used on iPhones. Furthermore, the script mentioned below seems to be causing problems specifically on iPhone devices. var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstar ...

Leveraging a VueJS prop as a variable in an array mapping operation

Trying to figure out a solution where a variable (prop) can be used in an array map function. The initial code snippet looks like this: var result = this.$store.getters['example/store'].map(a => a.fixed_column) I aim for fixed_column to be ...

Regular expression for date format (e.g. January 23, 2015)

Just diving into the world of regex and struggling to grasp how to create a pattern for a date format like (August 9, 2011). ...

Assign a unique variable to each div simultaneously

I am looking to implement a countdown feature for each DIV with the class (.topitembox) by incorporating specific JSON variables. $('#countdown_items .topitembox').each(function () { itmID = $(this).attr('class').replace(/[^0-9]/g, ...

Updating online status with Firebase and AngularJS when switching windows

Hi there, I'm currently looking to implement a stateOnline attribute for each user in my web app (using Angular 5 + Firebase). I came across some solutions for Android and attempted to adapt them for my needs: signInUser(email: string, password: st ...

Adjusting the Scaling Value to Match the Browser's Scaling Value

I'm struggling with a problem in HTML where the initial-scale function is not working as expected. When I zoom in on certain pages, it saves the zoom level. However, when I navigate to another page and then return to the original one, the zoom level r ...

What could be causing the error I'm encountering while attempting to utilize Array.includes as the function for Array.filter in my JavaScript code?

During a recent javascript project, I attempted something like the following code snippet. To my surprise, it did not work and instead produced an error message. const test = [1, 2, 3, 4]; const something = [1, 2, 3, 4, ,5, 6, 7, 8].filter(test.includes) ...

Is there a way for me to retrieve the locator value of a webelement?

How can I retrieve the selector value used in a selenium webelement in javascript? Let's say I have the following object: var el = browser.driver.findElement(by.id('testEl')); I want to extract the text 'testEl' from this object ...

In the Kendo AngularJS tree view, prevent the default behavior of allowing parent nodes to be checked

Hi there, I am currently using Kendo treeview with Angularjs. My tree view has checkboxes in a hierarchy as shown below Parent1 Child1 Child2 I would like the functionality to work as follows: Scenario 1: if a user selects Parent1 -> Child1, Chil ...

Calculate a new value based on input from a dynamic textbox within a datatable when a key is pressed

This question is a follow-up from the following solved queries (please do not mark it as a duplicate): jquery: accessing textbox value in a datatable How to bind events on dynamically created elements? I have generated a dynamic textbox within a dat ...

Unable to execute script tag on PHP page loading

When I make an AJAX request to fetch JavaScript wrapped in <script> tags that needs to be inserted on the current page, how can I ensure that the code executes upon insertion? Here's the snippet I'm using to add the code: function display ...

The toLowerCase method seems to be malfunctioning along with several other functions

JS var score = 0 var yes = "yes" var pokemonName = []; var bg = []; var index = 0; document.getElementById('repete').style.visibility = 'hidden'; (function asyncLoop() { background = bg[num = Math.floor(Math.random() ...

Incorrect elements displayed by Preact

Currently, I am utilizing Preact (essentially React) to display a list of items stored in a state array. Each item is accompanied by a remove button. My issue arises when the remove button is clicked; the correct item is deleted (I have double-checked this ...

Troubleshooting Sequelize's hasMany and belongsTo relationships

Looking to create 2 tables in Mysql using the power of node.js & sequelize.js. The two models we're working with are User and Company Here's what the fields for User look like: - id - username - password And for Company, here are its fields: - ...

What are the best ways to utilize getElementById in React?

As a beginner in React, I am attempting to create an auto text animation for my project. While I have successfully implemented it in VanillaJS, I am facing challenges with doing the same in React. import React, { Component } from 'react' class A ...