Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material.

Here is my shared component pfa-share-error:

<mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)">
        Required
  </mat-error>
  <mat-error  *ngIf="fieldErrors(fieldName).touched && fieldErrors(fieldName)">
       Required
  </mat-error>
  <mat-error *ngIf="fieldErrors(fieldName).pattern && fieldErrors(fieldName)">
        Required
  </mat-error>

And I am using this in my form:

<mat-form-field appearance="outline">
    <mat-label>{{ "COUNTEY.NAME" | translate }}</mat-label>
    <input formControlName="name" matInput />
    <pfa-share-error [form]="addCountryFG" field="name"></pfa-share-error>
  </mat-form-field>

However, when an error occurs, it displays like this in my form: https://i.stack.imgur.com/UwaGH.png

I want the error messages to appear like this instead:

https://i.stack.imgur.com/1wj8i.png

How can I solve this problem now?

javascriptangulartypescriptangular-material

Answer №1

If you're looking for a solution, consider the following approach:

Within your primary HTML file: 

<mat-form-field appearance="outline">
    <mat-label>{{ "COUNTEY.NAME" | translate }}</mat-label>
    <input formControlName="name" matInput />
    <mat-error>
       <pfa-share-error [form]="addCountryFG" field="name"></pfa-share-error>
    </mat-error>
</mat-form-field>

Incorporate the pfa-share-error component in your shared environment:

<ng-container *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)">
    This field must not be left empty
</ng-container>

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

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Discover the position of a dynamically added element

Is there a way to identify the specific dynamically added checkbox that was clicked, whether by index or name? I came across a similar question with a solution in this JSFiddle: JSFiddle Instead of just displaying "clicked", I would like it to show someth ...

javascriptjqueryhtmlcss

Inject AJAX response text into a specific div element

I am working on a PHP file that retrieves MySQL results using post information from an AJAX request. The PHP file is set to echo the information from the MySQL table. Now, I need help figuring out how to use JQuery to load this response text into a DIV e ...

phpjavascriptjqueryhtml

Is it possible to execute appendChild in the context of JS-DOM-creation?

Hey there, I'm a newbie trying my hand at DOM creation. I've encountered a strange issue with appendChild - the first and second tries work fine, but I'm completely stuck on the third attempt. Here's my HTML: <html> <head> ...

javascripthtmldomappendchild

regex execution and testing exhibiting inconsistent behavior

The regex I am using has some named groups and it seems to match perfectly fine when tested in isolation, but for some reason, it does not work as expected within my running application environment. Below is the regex code that works everywhere except in ...

javascriptnode.jsregextypescript

The technique for concealing particular div elements is contingent upon the specific values within an array

My TypeScript code is returning an array in this format: allFlowerTypes (3) ['Rose', 'Bluebell' , 'Daisy'] I want to dynamically show or hide the following HTML content based on the array values above: <ul> <li> ...

htmltypescript

Is ConnectionServiceModule not compatible with Angular version 17.2.0?

I have encountered an issue in my Angular project that involves the compatibility of the ng-connection-service library with Angular Ivy. When I attempt to bring in the ConnectionServiceModule from the ng-connection-service into my Angular module, I am rece ...

angulartypescriptcompatibilityivynpm-package

Calendar complete: ActiveRecord::RecordNotFound (Event with 'id' = update not found)

I'm currently facing an issue with integrating FullCalendar into my rails application. Specifically, I am encountering difficulties with saving after performing drag-and-drop actions. Within my application, I have two models - Event and Workout. The ...

javascriptruby-on-railsajaxfullcalendardom-events

An Easier Way to Incorporate an Image Insert Button into CKEditor

Having trouble displaying the Insert Image button in CKEditor 4.1.1? Here's my current configuration setup in config.js: CKEDITOR.editorConfig = function( config ) { // Customizing default configuration here. // For more details, check: http: ...

javascriptckeditor

Combining arrays using value comparison in Google Analytics and MongoDB

Help me out, Stack! This job is driving me crazy. Here's what I'm working on: Using the Google Analytics NodeJS SDK, I'm retrieving data about the most visited pages of my website. By leveraging Google's user-friendly URLs (slugs), I se ...

javascriptarraysnode.jsfor-loop

Calculating the total of all values in a table

For my ngFor loop, the invoice total is calculated based on price and hours, but I also want to calculate the totals of all invoices in the end. <tr *ngFor="let invoice of invoiceItem.rows"> <td>{{ invoice.rowName }}</td> <td& ...

htmlangulartypescript

Tips for updating the background color when clicking in Vue

I've been attempting to change the background color of an element upon clicking it using Vue, but so far I haven't had any success. Here's what I have come up with, including a method that has two functions for the onclick event in Vue. &l ...

javascriptvue.js

Verify using ngIf whether an Angular component is an array or not

Is it possible to target a specific component of an array rather than just checking for a variable in Angular? <div class="someComponent" *ngIf="someVariable"> For instance, how can I use the array component someArray[] with the ...

arraysangularangular-ng-if

What strategies can I use to control the DOM within the onScroll event in ReactJS?

I am currently working on implementing an arrow-up button that should be hidden when I am at the top of my page and displayed once I scroll further down. However, I am facing issues with manipulating the DOM inside my handleScroll function to achieve this. ...

javascripthtmlreactjsdom

implement some level of control within the ngFor directive in Angular

For instance, let's say I have an ngfor loop: <ng-container *ngFor="let setting of settings | trackBy: trackById"> <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-me ...

htmlangulartypescriptangular-material

Adjust the element's height as you scroll

I am currently experimenting with a method to dynamically increase the height of an element based on user scrolling behavior. Despite trying multiple approaches, I have encountered challenges in getting it to work effectively. The concept is as follows: ...

javascriptjquerycssscrollgaussianblur

Error: ajax is not defined and needs to be declared (repeated twice)

Currently, I have a form that requires processing using Ajax. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <div class="column1"> <form class="form box" action="javascript:networkCheck();" ...

javascriptphpjqueryhtmlajax

Leveraging TypeScript to share information between directives in AngularJS through asynchronous calls

Although I've found some scattered information on how to tackle this issue, I haven't been able to find a solid solution. In my AngularJS application, I have an asynchronous call that fetches data from a server and I need to store it in a variab ...

javascriptangularjsasynchronoustypescriptangular-promise

What are the steps for conducting a component test with material ui?

My current component is built using . import React from 'react'; import { AppBar, Toolbar } from 'material-ui'; import { Typography } from 'material-ui'; import { MuiThemeProvider, createMuiTheme } from 'material-ui/sty ...

javascriptreactjsmaterial-uijestjsenzyme

What is the method for sending a file using JavaScript?

var photo = 'http://cs323230.vk.me/u172317140/d_5828c26f.jpg'; var upload_url = 'http://cs9458.vk.com/upload.php?act=do_add&mid=62..'; var xmlhttp = getXmlHttp(); var params = 'photo=' + encodeURIComponent(photo); xmlhttp ...

javascriptajaxfile-upload