Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?

Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?

Content Index :

Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?
Tag : javascript , By : General Mills
Date : January 11 2021, 03:34 PM

wish help you to fix your issue Yes, it will internally perform type conversion while carrying out the validations based on the rules you have set on the form control.
Therefore, you may choose to remove the type attribute on your input. If you were to remove it, I would recommend you to include another Validator on your form control such that it checks if the input is a number.
  <input matInput [formControl]="purchaseCost" placeholder="Purchase cost*">
  <mat-error *ngIf="purchaseCost.errors && purchaseCost.errors.required">Please enter a purchase cost</mat-error>
  <mat-error *ngIf="purchaseCost.errors && purchaseCost.errors.min">Min. value is 0</mat-error>
  <mat-error *ngIf="purchaseCost.errors && purchaseCost.errors.pattern">Please enter a number</mat-error>
purchaseCost = new FormControl('', [

No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

reactive form validator won't work in Angular

Tag : angular , By : kdietz
Date : March 29 2020, 07:55 AM
wish helps you you are mixing both reactive validators and template validators. not sure why you are complicating things, reactive forms are simple.
bulit you a Demo with your form:
<form [formGroup]="creditCardForm">
    <input type="text" formControlName="cardHolderName"/>
    <label *ngIf="creditCardForm.get('cardHolderName').invalid">Cardholder name is required</label>

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.creditCardForm = new FormGroup({
      'cardHolderName': new FormControl(null, [Validators.required, Validators.maxLength(5)])

Wrapping angular reactive form component with validator

Tag : angular , By : Rb.Ridge
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The "key" is using viewProvider. You use a @Input set to give value to a formControl, see stackblitz. The "magic" is that if equal refered to formControl in the "children" or form.get('input1') in the parent
  selector: 'app-form-control',
  template: `
  <div class="form-group row">
  <label class="col-2 col-form-label">{{label}}</label>
  <div class="col-10">
    <input class="form-control" placeholder="{{placeholder}}"
    [formControl]="formControl" autocomplete="nope"/>
  <!--you can control the properties of formControl-->
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]})
export class HelloComponent {

  formControl: FormControl;

  constructor(private parentF: FormGroupDirective) { }

  set controlName(value) {
    this.formControl = this.parentF.form.get(value) as FormControl

  @Input() label: string;
  @Input() placeholder: string;

<form [formGroup]="myForm" (submit)="submit(myForm.value)">
    <app-form-control label="Lastname" placeholder="Lastname" controlName="lastName"></app-form-control>

Custom validator to check if passwords match in Angular 6 and Reactive Form

Tag : angular , By : dnyaneshwar
Date : March 29 2020, 07:55 AM
Does that help I have a form with 4 input fields, 2 for emails and 2 for passwords. I would like to check if the emails and passwords match. I'm using a validator in the form group. , You can try null check before getting form control's value like this;
matchValidator(control: AbstractControl) {
    const password: string = control.get('password').value; // get password from our password form control
    const passwordConfirmed: string = control.get('passwordConfirmed').value; // get password from our passwordConfirmed form control
    // compare is the password math
    if (password !== passwordConfirmed) {
        // if they don't match, set an error in our passwordConfirmed form control
        control.get('passwordConfirmed').setErrors({ mismatch: true });

Custom validator not working correctly in Angular reactive form

Tag : angular , By : SachinJadhav
Date : March 29 2020, 07:55 AM
will be helpful for those in need New to Angular and trying to add a custom email validator that will go to my server and check if the email address is already in use. , Made some changes:
    <form class="form-group" [formGroup]='registerForm'>
        <input type="email" 
                        [ngClass]="{'is-invalid': registerForm.get('email').errors && registerForm.get('email').touched}
                          || registerForm.get('email').touched && registerForm.hasError('emailExists')"
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('required')">
                          Email is required
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('email')">
                          Invalid email address
                        <div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('emailExists')">
                            Email address already in use

                    <b>email value:</b> {{registerForm.controls.email.value}} <br/>
                    <b>email status:</b> {{registerForm.controls.email.status}}
import { Component } from '@angular/core';
import { FormBuilder, Validators, FormGroup, AbstractControl } from '@angular/forms'

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  name = 'Angular';
  constructor(private fb: FormBuilder) { }

  ngOnInit() {

  createRegisterForm() {
    this.registerForm = this.fb.group({
      gender: ['male'],
      email: ['', [Validators.required, Validators.email, this.emailMatchValidator]],
      username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
      knownAs: ['', Validators.required],
      dateOfBirth: [null, Validators.required],
      city: ['', Validators.required],
      country: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(8)]],
      confirmPassword: ['', Validators.required]
      /*, {
          validator: [this.passwordMatchValidator, this.emailMatchValidator]

  passwordMatchValidator() {
    /* some implementation */

  emailMatchValidator(control: AbstractControl) {
    if (control.value !== 'emailaddress@gmail.com') {
      return false;
    } else {
      return { emailExists: true };


How to use curency pipes in Angular reactive form and Validator

Tag : angular , By : Jason Vance
Date : March 29 2020, 07:55 AM
should help you out I use Angular reactive form with a Validator (value > 0). In my Model, my data is a BigDecimal (5.80 for exemple): , You could give this a whirl:
<input type="text" class="form-control" formControlName="money" [value]="getNumberVal(userInfoFormGroup.get('money')?.value) | currency:'EUR'">

getNumberVal(val: string): number {
  val = `${val}`;
  return parseFloat(val.replace(/\u20AC/g, ''));

positiveVal(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const invalid = this.getNumberVal(control.value) <= 0;
    return invalid ? {'positiveVal': {value: control.value}} : null;
Related Posts Related QUESTIONS :
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com