Highest Voted 'angular-validation' Questions

5

votes

2 answers

FormGroup get field value: TypeError: Cannot read property 'get' of undefined

I'm trying make a validation for "passwordConfirm" field, but i get a stange error: ERROR TypeError: Cannot read property 'get' of undefined here is my code: loginForm: FormGroup; ngOnInit(){ this.loginForm = new FormGroup({ 'email': new…

angular angular-forms angular-validation

asked Aug 11 '17 at 10:40

sandum

751
5
13
25

5

votes

2 answers

Angular custom async validator not working

Here is the demo plnkr. I am trying to implement a custom async validator for a OTP input which has a text box and a verify button. I want to validate the input only when the user clicks on the verify OTP button or form submit button. Currently…

javascript angular validation angular-forms angular-validation

asked Jun 27 '17 at 16:00

Saurabh Palatkar

3,242
9
48
107

5

votes

2 answers

How can I reference control added in ngFor?

I am adding several inputs using ngFor in a template driven form and I would like to add corresponding error messages for when the inputs are invalid. Normally if I was not using ngFor I would use #inputName="ngModel". Is there any way for me to…

angular angular2-template ngfor angular-validation

asked Mar 29 '17 at 02:40

Learning2Code

521
9
21

4

votes

2 answers

Angular Form exact 10 alphanumeric letters pattern validation

I have the following problem with this specific use case of a reactive form field validation. At the moment I only set this rule: this.projectForm = this.fb.group({ …

angular angular-reactive-forms angular-validation

asked Aug 24 '20 at 17:12

AndreaNobili

40,955
107
324
596

4

votes

2 answers

Linking two fields in an Angular validator

I have an Angular 9 form where four fields are related. One is a checkbox, and the rest are inputs. When the checkbox is checked, the inputs should not be empty, but when it is not checked, it doesn't matter. I want to make validators for this, so…

angular angular9 angular-validation

asked May 14 '20 at 19:16

Luctia

322
1
5
17

4

votes

1 answer

How to add custom validator to a FormArray?

I want to add custom validator to form in order to prevent mat-step switching to next step. All works well when I use FormGroups but I fail to achieve validation when I have to use FormArray. I've tried at least two variants of assigning validator…

angular angular-material angular-forms angular-validation

asked Sep 04 '19 at 18:39

multim

51
1
2
5

4

votes

2 answers

How do you determine which validator condition failed in angular 8

for example I have an input , and I add muti validate conditions like: required , mail and pattern , so any one failed will lead the controls.status gave me "INVALID" , what shall I do if I want to know which one is failed?

angular angular-validation angular-validator

asked Jun 26 '19 at 09:44

Shinji035

331
2
6
17

4

votes

2 answers

How to create a custom form validator to accept only valid JSON in Angular

In my Angular app, I have a reactive form which for simplicity I will assume to have only one control called configJson which is represented by a

in the DOM.
I need to validate this form control to only accept valid JSON text from the…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/json" class="post-tag grid--cell" title="show questions tagged 'json'" rel="tag">json</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/angular-reactive-forms" class="post-tag grid--cell" title="show questions tagged 'angular-reactive-forms'" rel="tag">angular-reactive-forms</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Apr 18 '19 at 14:31">asked Apr 18 '19 at 14:31</time>
    <a href="../../users/3497671/francesco-borzi" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/3497671.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Francesco Borzi" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/3497671/francesco-borzi" class="s-user-card--link">Francesco Borzi</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">56,083</li>
            <li class="s-award-bling s-award-bling__gold" title="47 gold badges">47</li>
            <li class="s-award-bling s-award-bling__silver" title="179 silver badges">179</li>
            <li class="s-award-bling s-award-bling__bronze" title="252 bronze badges">252</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-55345581">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/55345581/minlength-and-maxlength-validators-not-working-in-angular7-reactive-form" class="question-hyperlink">minLength and maxLength validators not working in Angular7 Reactive Form</a></h3>
        <div class="excerpt">I am trying to use Validators.minLength and Validators.maxLength in Angular7 using a Reactive Form but get the following error:

ERROR Error: Expected validator to return Promise or Observable.

This is the typescript code I have:
import {…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular-reactive-forms" class="post-tag grid--cell" title="show questions tagged 'angular-reactive-forms'" rel="tag">angular-reactive-forms</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 25 '19 at 20:02">asked Mar 25 '19 at 20:02</time>
    <a href="../../users/7201774/rich" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/7201774.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rich" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/7201774/rich" class="s-user-card--link">Rich</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">6,470</li>
            <li class="s-award-bling s-award-bling__gold" title="15 gold badges">15</li>
            <li class="s-award-bling s-award-bling__silver" title="32 silver badges">32</li>
            <li class="s-award-bling s-award-bling__bronze" title="53 bronze badges">53</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-54577466">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/54577466/required-reactive-form-control-is-invalid-while-pristine" class="question-hyperlink">required reactive form control is invalid while pristine</a></h3>
        <div class="excerpt">I'm having an angular reactive form with validators (taken from the scheme, but refer to it as required). The control is invlid when the form is initiate, while it is still pristine, not touched and not dirty. 
Is there any assumption why it…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Feb 07 '19 at 16:06">asked Feb 07 '19 at 16:06</time>
    <a href="../../users/6721134/guy-e" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/6721134.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Guy E" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/6721134/guy-e" class="s-user-card--link">Guy E</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,775</li>
            <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
            <li class="s-award-bling s-award-bling__silver" title="27 silver badges">27</li>
            <li class="s-award-bling s-award-bling__bronze" title="55 bronze badges">55</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-53814936">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/53814936/how-to-add-custom-validation-error-message-for-custom-validator-in-angular" class="question-hyperlink">How to Add Custom Validation Error Message for Custom Validator in Angular</a></h3>
        <div class="excerpt">I'm using reactive angular forms and created new custom form validator but its not showing custom messages I wanted to add custom message for custom validator.
I'm trying to ignore static message I want that message to be added in that validator…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/angular-reactive-forms" class="post-tag grid--cell" title="show questions tagged 'angular-reactive-forms'" rel="tag">angular-reactive-forms</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 17 '18 at 12:08">asked Dec 17 '18 at 12:08</time>
    <a href="../../users/1470999/mohit-bumb" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/1470999.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mohit Bumb" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/1470999/mohit-bumb" class="s-user-card--link">Mohit Bumb</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,466</li>
            <li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li>
            <li class="s-award-bling s-award-bling__silver" title="33 silver badges">33</li>
            <li class="s-award-bling s-award-bling__bronze" title="52 bronze badges">52</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-51585028">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/51585028/angular-6-reactive-form-validation-pattern-doesn-t-work" class="question-hyperlink">Angular 6 - reactive form validation pattern doesn't work</a></h3>
        <div class="excerpt">I have an Angular 6 reactive form and trying to validate a password with regex pattern and it doesn't work.
               <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password"…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular6" class="post-tag grid--cell" title="show questions tagged 'angular6'" rel="tag">angular6</a> 
                
                <a href="../../questions/tagged/angular-reactive-forms" class="post-tag grid--cell" title="show questions tagged 'angular-reactive-forms'" rel="tag">angular-reactive-forms</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
                <a href="../../questions/tagged/angular-validator" class="post-tag grid--cell" title="show questions tagged 'angular-validator'" rel="tag">angular-validator</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 29 '18 at 22:22">asked Jul 29 '18 at 22:22</time>
    <a href="../../users/2818430/user2818430" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2818430.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user2818430" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2818430/user2818430" class="s-user-card--link">user2818430</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">5,853</li>
            <li class="s-award-bling s-award-bling__gold" title="21 gold badges">21</li>
            <li class="s-award-bling s-award-bling__silver" title="82 silver badges">82</li>
            <li class="s-award-bling s-award-bling__bronze" title="148 bronze badges">148</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-51556469">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/51556469/angular-6-custom-validators-not-executing" class="question-hyperlink">Angular 6: Custom validators not executing</a></h3>
        <div class="excerpt">I've been fighting this for 2 days now. I just can't figure out what is wrong. It seems that my custom validators are not executed. 
If you just press the 'Next' button every control is highlighted with red borders. If you fill the form, type…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular-forms" class="post-tag grid--cell" title="show questions tagged 'angular-forms'" rel="tag">angular-forms</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 27 '18 at 10:53">asked Jul 27 '18 at 10:53</time>
    <a href="../../users/3319392/jette" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/3319392.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jette" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/3319392/jette" class="s-user-card--link">Jette</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,459</li>
            
            <li class="s-award-bling s-award-bling__silver" title="28 silver badges">28</li>
            <li class="s-award-bling s-award-bling__bronze" title="37 bronze badges">37</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-47701121">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/47701121/best-way-to-modify-a-form-control-value-based-on-another-form-control-in-angul" class="question-hyperlink">Best way to modify a form control value based on another form control in Angular 2</a></h3>
        <div class="excerpt">In Angular 2 reactive forms, what is the best way to change a form control's value based on another value?  Is it better to subscribe to my FormGroup's .valueChanges method and call .setValue on the appropriate form control based on some condition,…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular2-forms" class="post-tag grid--cell" title="show questions tagged 'angular2-forms'" rel="tag">angular2-forms</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 07 '17 at 18:00">asked Dec 07 '17 at 18:00</time>
    <a href="../../users/4963800/tyzone34" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/4963800.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tyzone34" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/4963800/tyzone34" class="s-user-card--link">Tyzone34</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">103</li>
            
            <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li>
            <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-45599070">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/45599070/how-to-pass-extra-param-to-an-async-validator-reactive-forms-in-angular" class="question-hyperlink">How to pass extra param to an async validator (reactive forms) in Angular?</a></h3>
        <div class="excerpt">I've got the following async validator. If I want to use it to a reactive form, I have to pass it as 3rd param
slug: [null, [Validators.required], [CustomValidators.slug]],

How can I pass an extra param to the validator?
import {FormControl} from…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular-reactive-forms" class="post-tag grid--cell" title="show questions tagged 'angular-reactive-forms'" rel="tag">angular-reactive-forms</a> 
                
                <a href="../../questions/tagged/angular-validation" class="post-tag grid--cell" title="show questions tagged 'angular-validation'" rel="tag">angular-validation</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Aug 09 '17 at 19:24">asked Aug 09 '17 at 19:24</time>
    <a href="../../users/913951/michalis" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/913951.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Michalis" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/913951/michalis" class="s-user-card--link">Michalis</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">6,686</li>
            <li class="s-award-bling s-award-bling__gold" title="13 gold badges">13</li>
            <li class="s-award-bling s-award-bling__silver" title="52 silver badges">52</li>
            <li class="s-award-bling s-award-bling__bronze" title="78 bronze badges">78</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>

Questions tagged [angular-validation]