Mat error is not displaying error for custom validators but template is displaying error

Issue app.component.html <div class="col-sm-3"> <mat-form-field class="col-sm-3" appearance="outline" class="example-full-width input-small-size d-block"> <mat-label>Personal Phone 1 </mat-label> <input matInput formControlName="phonePersonal01" type="number"> <mat-error *ngIf="personalform.errors?.invalidPhoneMatch"> Enter different numbers. </mat-error> <!– This error is not displaying –> </mat-form-field>{{personalform.errors|json}} <!– Output is : { "invalidPhoneMatch": true }–>

Continue reading

Angular material multiselect check box current value not able to get

Issue when i check the checkbox i am getting undefined when i uncheck getting the value of what i previously checked. how to fix this issue? <div *ngSwitchCase="’multiselect’" [ngClass]="{‘mandate’: field.required}" > <mat-form-field appearance="outline" > <mat-label>{{field.placeHolder}}</mat-label> <mat-select [formControlName]="field.controlName" multiple [(ngModel)]="countrySelected" >

Continue reading

Why mat-spinner not showing?

Issue Index.html file is: <body> <mat-spinner></mat-spinner> </body> App.module file is: @NgModule({ imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatProgressSpinnerModule, BrowserAnimationsModule ] }) I see on the page tag <mat-spinner></mat-spinner> but it does not work, no any errors in console Solution Angular components

Continue reading

How to output values from Material date range picker in angular dart

Issue How to get values from list of material-date-range-picker in angular dart? https://dart-lang.github.io/angular_components/#/material_datepicker <ul> <li *ngFor=”let rangeSimplified of datepickerComparisonList”> <material-date-range-picker compact [range]=”rangeSimplified”= [(minDate)]=”minDate” [(maxDate)]=”maxDate” [(outputDateFormat)]=”outputDateFormat” [required]=”true”> </material-date-range-picker> </li> </ul> I want to get an array of values of all periods

Continue reading

ngOninit runs only once – form is not updated

Issue I have material sidenav container with material navigation list: <mat-sidenav-container class=”cont”> <mat-sidenav #drawer mode=”side” opened role=”navigation”> <mat-nav-list> <table> <tr *ngFor = “let thing of values”> <td> <button [class.selected]=”thing === selectedThing” (click) = “onSelectedThing(thing)”>{{thing.Date}}</button> </td> </tr> </table> </mat-nav-list> </mat-sidenav> <mat-sidenav-content>

Continue reading

Angular Virtual Scroll Jumps around

Issue I am using Angular Material Virtual scroll, the items get loaded correctly into the DOM, but while scrolling it happens that it jumps around and automatically jumps to the end. <cdk-virtual-scroll-viewport #scrollViewport (scrolledIndexChange)="scrolled($event)" [itemSize]="ITEM_SIZE" class="my-virtual" > <div *cdkVirtualFor="let elem

Continue reading

Angular Material components fail tests

Issue I have a Sidenav Menu made in Angular. The component looks like this: The template: <mat-toolbar color=”primary” [fxLayoutAlign]=”(settings.menuType != ‘mini’) ? ‘space-between center’ : ‘center center'” class=”sidenav-header”> <a mat-raised-button color=”accent” routerLink=”/” (click)=”closeSubMenus()” class=”small-logo”>Menu</a> <a *ngIf=”settings.menuType == ‘default'” class=”logo” routerLink=”/”

Continue reading

Set form control to dirty in angular test

Issue I have the following component template: <div> <mat-checkbox [(ngModel)]="model.value" required="true" #checkbox="ngModel">{{model.title}}</mat-checkbox> <mat-error *ngIf="checkbox.invalid && checkbox.dirty">Some Error</mat-error> </div> And in my test I would like to test the the error state is shown. However I need to access the input

Continue reading

Make test case for reusable mat table columns in jasmine

Issue This is my parent TS import { Component, Input, OnInit } from ‘@angular/core’; import { Column } from ‘../../../../shared/molecules/table/column’; import { DataRecord, TransitReport, } from ‘../../../organisms/transit-report-wrapper/transit-report.model’; @Component({ selector: ‘app-transit-report’, templateUrl: ‘./transit-report.component.html’, styleUrls: [‘./transit-report.component.scss’], }) export class TransitReportComponent implements OnInit

Continue reading

no render with mat-error, ng-template and *ngTemplateOutlet

Issue This code is working fine and properly (without ngTemplateOutlet): <mat-form-field [formGroup]=”formGroup”> <input matInput type=”text” [formControlName]=”fControlName” > <ng-container *ngIf=”isShowErrors()” ngProjectAs=”mat-error”> <ng-container *ngFor=”let error of showSMErrors” > <mat-error>{{ error.message }}</mat-error> </ng-container> </ng-container> </mat-form-field> But this code isnt working properly(with ngTemplateOutlet), why?

Continue reading

Unit test $mdDialog angular material

Issue I called one $mdDialog inside a function. I want to unit-test $mdDialog ok and cancel cases. The below is my controller code (app.controller.js). (function () { ‘use strict’; app.controller(‘AppCtrl’, AppCtrl); AppCtrl.$inject = [‘$scope’, ‘$mdDialog’]; function AppCtrl($scope, $mdDialog) { $scope.saveEntry

Continue reading

How to retrieve data from ngx-modal on submit angular 5

Issue I am using ngx-modal to create dialog, below is the code in html <button (click)=”myModal.open()”>Click Me</button> <modal #myModal cancelButtonLabel=”Cancel All [(ngModel)]=”rfin” submitButtonLabel=”submit” (onSubmit)=”callSubmit()”> <modal-content > <mat-card> <mat-card-content > <h2 class=”example-h2″>Select Emp</h2><br> <section class=”example-section” *ngFor=”let ep of emp” > <ng-template>

Continue reading

mdDatepicker broken with AngularJS 1.5.9 and 1.6

Issue Angular 1.5.9 introduced very interesting performance upgrades: $compileProvider.commentDirectivesEnabled( false ); // disable comment directives $compileProvider.cssClassDirectivesEnabled( false ); // disable css class directives I updated version of Angular in my app to 1.5.9-build.5158+sha.cc92da0 and later to 1.6.0-rc.1 to use above

Continue reading

Fitting a mat-accordion inside ag-grid

Issue I have a fairly standard setup of ag-grid with a nested component as follows : import { Component } from ‘@angular/core’; import * as agGrid from ‘ag-grid-community’; import { NestedMatExpansionPanelComponent } from ‘./nested-mat-expansion-panel/nested-mat-expansion-panel.component’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls:

Continue reading

Angular5 – How to detect empty or deleted field in mat-autocomplete?

Issue This is my html which contains the material autocomplete. <ng-container *ngSwitchCase=”‘autocomplete'”> <div [ngClass]=”(filter.cssClass || ‘col-md-4’) + ‘ mt-2 pt-1′”> <div class=”filter-key-label”> {{filter.columnTitle}} </div> <div class=”filter-form-control d-flex flex-wrap justify-content-left”> <mat-form-field class=”full-width”> <input type=”text” matInput [formControl]=”myControl” [matAutocomplete]=”auto” ng-model=”blah”> <mat-autocomplete #auto=”matAutocomplete”> <mat-option

Continue reading

Mat Radio Button Color Change in Angular

Issue Change The Color Of Angular Material mat-radio-button ,I am using Angular 11 Version & Angular Material 11.0.4 Version <mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group> Solution i searched lot of things ,but finally i got the

Continue reading

ng-repeat v/s md-virtual-repeat

Issue Difference between angular ng-repeat and angular material md-virtual-repeat? When should i use one or another? Solution ng-repeat renders all elements in list, its less performant on large lists. md-virtual-repeat renders list what is visible on viewport, it doesn’t render

Continue reading

Angular Dropdown Excel Post

Issue I want to create a selection dropdown that when the user select a value it will send to the backend controller. This is my code so far anyone could help HTML <mat-form-field appearance="fill" class="dropDown1"> <mat-select [(ngModel)]="selectedTemplate"> <mat-option *ngFor="let items

Continue reading

Angular Material Collapsible Card

Issue Is there a way to make a collapsible card using angular material? Seems like something that would be fairly popular, but I’ve been searching for the appropriate angular material component/setting here:Angular Material – Card and found nothing. Thanks! Solution

Continue reading

[Object][Object] angular

Issue I’m trying to display the value in my form why i get [Object][Object] in my display i tried the ngModel but i have a validators this is the out TS ngOnInit(): void { this.Form = this.fb.group({ Code: ({value:this.idObj,}, Validators.required),

Continue reading