Category : mat-error

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 }–> </div> app.component.ts personalform = this.fb.group({ phno: [”, [Validators.required, Validators.pattern(‘+{0,1}[0-9]{10,12}’)]], phonePersonal01: [”, [Validators.required, Validators.pattern("+{0,1}[0-9]{10,12}")]], phonePersonal02: [”, [Validators.required, ..

Read more

I am implementing custom validator named as proportion validator. Custom Validator is working fine but I am unable to prompt error message in HTML mat-error. I have highlighted the target line in component.html using ‘—>’. Proportion Validator is returning GratProp as true if validation fails. Please help component.html <h5>Nominees</h5> <div class="row"> <form novalidate [formGroup]="FormNominees"> <div ..

Read more

Here is a link to an example of the issue: https://stackblitz.com/edit/wrappedformerrors?file=src/app/form-field-error-example.html I’ve tried some div, spans and br tags inside of the mat-error tags but that does nothing. I don’t want to push the fields down as a permanent solution as it would look awkward when no error message is displayed. Source: Angular Materia..

Read more

I use angular 8 with angular material to create my app. I have the following form field defined: <mat-form-field floatLabel=”always”> <app-my-datetime-input placeholder=”From” formControlName=”fromDatetime”></app-my-datetime-input> <mat-error>{{getError(‘fromDatetime’)}}hello</mat-error> <mat-hint>YYYY-MM-DD HH:MM:SS</mat-hint> </mat-form-field> and app-my-datetime-input is a component that I created with the following code: the html: <div [formGroup]=”parts”> <input matInput mask=”0000-00-00 00:00:00″ formControlName=”datetime” (input)=”_handleInput()” /> </div> and this is the ..

Read more