Styjun

Intuition for the derivative of the exponential function

Would there be a difference between boiling whole black peppercorns or fine ground black pepp in a stew?

Copying files: Does Windows write to disk if files are identical

How to record this drawing effect?

should I include offer letter from a different institution in my application for a faculty position

Foiled Bank Robbery

What's the short and accented note at the very end of a song called?

A word/phrase means "a small amount" (of a color)

How to draw 15-puzzle in LaTeX

Length-terminated sequences

How long would it take to build 30 miles of Roman road?

How can different packages have identical source code?

Why doesn't the nucleus have "nucleus-probability cloud"?

Had J. K. Rowling seen This Is Spinal Tap before writing Harry Potter and the Philosopher's Stone?

My cat gets angry and scared at me if I stand

Can someone interview their sibling?

Can you catch the thief?

Why is Robin Hood French in Shrek?

Confusion between 誰でも and 誰か

How to write 2**n - 1 as a recursive function?

What happened to the SEV instruction on the 6502?

You see a boat filled with people

Princesses covering an 8x8 chess board

Electric motors - what for beginning?

Angular 7 & Angular Material - Validator not showing MinLength error

Angular Material input validation error messages all showing on top of eachotherangular material 2 custom component with ng value accessorPlaceholder in mat-autoComplete does not work as illustrated in the Angular Material DocumentationAngular Material 2 Reactive Forms — mat-error with *ngIf not showing when validating for minLength, email and required validation worksGetting an error while using angular material mat-select with reactive formangular material - mat-error not displaying the error message for the input fieldAngular material form validation and error not correctly displayedGetting ERROR mat-form-field must contain a MatFormFieldControlValidating Angular form with PrimeNG and Material componentsAngular Material conflicting with ReactiveForms

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

0

I am working with Angular 7 and Angular Material and there is a small problem with my code that i can't solve. The next piece of code should return a string with my message error if there is one:

 getPasswordErrorMessage() 
 return this.passwordFormControl.hasError('required') ? 'Password is required' :
 this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : '';
 

And it should be display between the mat-error tags:

 <mat-form-field>
 <input matInput minlenght="6" type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher">
 <mat-error *ngIf="passwordFormControl.invalid">
 getPasswordErrorMessage() 
 </mat-error>
 </mat-form-field>

Either way, only the "required field" error is being display. Is there a reason for the minLength error not to be displayed?

angular angular-material angular-forms

share|improve this question

edited Mar 28 at 21:40

Sébastien Bousquet

46455 silver badges1212 bronze badges

asked Mar 28 at 21:26

Enrique BermúdezEnrique Bermúdez

55655 silver badges2222 bronze badges

add a comment
 | 

0

I am working with Angular 7 and Angular Material and there is a small problem with my code that i can't solve. The next piece of code should return a string with my message error if there is one:

 getPasswordErrorMessage() 
 return this.passwordFormControl.hasError('required') ? 'Password is required' :
 this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : '';
 

And it should be display between the mat-error tags:

 <mat-form-field>
 <input matInput minlenght="6" type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher">
 <mat-error *ngIf="passwordFormControl.invalid">
 getPasswordErrorMessage() 
 </mat-error>
 </mat-form-field>

Either way, only the "required field" error is being display. Is there a reason for the minLength error not to be displayed?

angular angular-material angular-forms

share|improve this question

edited Mar 28 at 21:40

Sébastien Bousquet

46455 silver badges1212 bronze badges

asked Mar 28 at 21:26

Enrique BermúdezEnrique Bermúdez

55655 silver badges2222 bronze badges

add a comment
 | 

I am working with Angular 7 and Angular Material and there is a small problem with my code that i can't solve. The next piece of code should return a string with my message error if there is one:

 getPasswordErrorMessage() 
 return this.passwordFormControl.hasError('required') ? 'Password is required' :
 this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : '';
 

And it should be display between the mat-error tags:

 <mat-form-field>
 <input matInput minlenght="6" type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher">
 <mat-error *ngIf="passwordFormControl.invalid">
 getPasswordErrorMessage() 
 </mat-error>
 </mat-form-field>

Either way, only the "required field" error is being display. Is there a reason for the minLength error not to be displayed?

angular angular-material angular-forms

share|improve this question

edited Mar 28 at 21:40

Sébastien Bousquet

46455 silver badges1212 bronze badges

asked Mar 28 at 21:26

Enrique BermúdezEnrique Bermúdez

55655 silver badges2222 bronze badges

 getPasswordErrorMessage() 
 return this.passwordFormControl.hasError('required') ? 'Password is required' :
 this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : '';
 

 <mat-form-field>
 <input matInput minlenght="6" type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher">
 <mat-error *ngIf="passwordFormControl.invalid">
 getPasswordErrorMessage() 
 </mat-error>
 </mat-form-field>

angular angular-material angular-forms

angular angular-material angular-forms

share|improve this question

edited Mar 28 at 21:40

Sébastien Bousquet

46455 silver badges1212 bronze badges

asked Mar 28 at 21:26

Enrique BermúdezEnrique Bermúdez

55655 silver badges2222 bronze badges

share|improve this question

edited Mar 28 at 21:40

Sébastien Bousquet

46455 silver badges1212 bronze badges

asked Mar 28 at 21:26

Enrique BermúdezEnrique Bermúdez

55655 silver badges2222 bronze badges

edited Mar 28 at 21:40

Sébastien Bousquet

46455 silver badges1212 bronze badges

edited Mar 28 at 21:40

Sébastien Bousquet

46455 silver badges1212 bronze badges

asked Mar 28 at 21:26

Enrique BermúdezEnrique Bermúdez

55655 silver badges2222 bronze badges

asked Mar 28 at 21:26

Enrique BermúdezEnrique Bermúdez

55655 silver badges2222 bronze badges

1 Answer
1

active

oldest

votes

0

It is because of how you set up the function for returning error. The ternary will return the first match, and don't care about the next one.

getPasswordErrorMessage() 
 let error = '';
 error = this.passwordFormControl.hasError('required') ? 'Password is required' : '';
 error = this.passwordFormControl.hasError('minLength') && error ? `$error * 
 Password must be at least 6 characters long` : this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : ''; 
 return error;
 

This should do the trick.

share|improve this answer

answered Mar 28 at 21:42

Lars RødalLars Rødal

37633 silver badges1212 bronze badges

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55407086%2fangular-7-angular-material-validator-not-showing-minlength-error%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

It is because of how you set up the function for returning error. The ternary will return the first match, and don't care about the next one.

getPasswordErrorMessage() 
 let error = '';
 error = this.passwordFormControl.hasError('required') ? 'Password is required' : '';
 error = this.passwordFormControl.hasError('minLength') && error ? `$error * 
 Password must be at least 6 characters long` : this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : ''; 
 return error;
 

This should do the trick.

share|improve this answer

answered Mar 28 at 21:42

Lars RødalLars Rødal

37633 silver badges1212 bronze badges

add a comment
 | 

0

It is because of how you set up the function for returning error. The ternary will return the first match, and don't care about the next one.

getPasswordErrorMessage() 
 let error = '';
 error = this.passwordFormControl.hasError('required') ? 'Password is required' : '';
 error = this.passwordFormControl.hasError('minLength') && error ? `$error * 
 Password must be at least 6 characters long` : this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : ''; 
 return error;
 

This should do the trick.

share|improve this answer

answered Mar 28 at 21:42

Lars RødalLars Rødal

37633 silver badges1212 bronze badges

add a comment
 | 

It is because of how you set up the function for returning error. The ternary will return the first match, and don't care about the next one.

getPasswordErrorMessage() 
 let error = '';
 error = this.passwordFormControl.hasError('required') ? 'Password is required' : '';
 error = this.passwordFormControl.hasError('minLength') && error ? `$error * 
 Password must be at least 6 characters long` : this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : ''; 
 return error;
 

This should do the trick.

share|improve this answer

answered Mar 28 at 21:42

Lars RødalLars Rødal

37633 silver badges1212 bronze badges

getPasswordErrorMessage() 
 let error = '';
 error = this.passwordFormControl.hasError('required') ? 'Password is required' : '';
 error = this.passwordFormControl.hasError('minLength') && error ? `$error * 
 Password must be at least 6 characters long` : this.passwordFormControl.hasError('minLength') ? 'Password must be at least 6 characters long' : ''; 
 return error;
 

share|improve this answer

answered Mar 28 at 21:42

Lars RødalLars Rødal

37633 silver badges1212 bronze badges

answered Mar 28 at 21:42

Lars RødalLars Rødal

37633 silver badges1212 bronze badges

answered Mar 28 at 21:42

Lars RødalLars Rødal

37633 silver badges1212 bronze badges