Angular dropdown validation

Question

I'm using Angular 5 with forms validator. I'm trying to validate a select dropdown to avoid send the form without the user select an item from the select. The problem is the validation is not working. The validator works fine for an input control but not for the dropdown.

<div class="form-control">
    <label class="form-control__label" for="accionReglas">País *</label>
    <p-dropdown formControlName="paisDropdown" class="dropdown" [options]="countriesOptions" [readonly]="this.isReadOnly || filtersForm.get('nacInterRadioButton').value === 'N'" filter="true" placeholder="Seleccione su país"  required="true"></p-dropdown>
    <div *ngIf="filtersForm.get('paisDropdown').errors && (filtersForm.get('paisDropdown').dirty || filtersForm.get('paisDropdown').touched)">
        <span *ngIf="filtersForm.get('paisDropdown').errors.required" class="form-control__msg-txt">El país es obligatorio.</span>
    </div>
</div>

TypeScript Code:

import { FormBuilder, FormGroup, FormControl, Validators, Validator } from '@angular/forms';

this.filtersForm = this.fBuilder.group({
    "cifInput": new FormControl("", [ Validators.required, Validators.maxLength(10) ]),
    "paisDropdown": new FormControl([ Validators.required ])
});

Thank you very much !!!

miladfm · Accepted Answer · 2018-09-15 16:40:49Z

on submit form you have to set markAsTouched for each controller.

live example: https://stackblitz.com/edit/angular-obcju1

HTML:

<form [formGroup]="filtersForm" (ngSubmit)="onSubmit()">

    <input type="text" formControlName="cifInput"/>
    <span *ngIf="hasInputErrorRequired">Enter Input ...</span>
    <span *ngIf="hasInputErrorMaxlength">maxlength Error ....</span>


    <hr>
    <label for="accionReglas">País *</label>

    <p-dropdown
      formControlName="paisDropdown"
      [options]="countriesOptions"
      placeholder="Seleccione su país">
    </p-dropdown>

    <span *ngIf="hasDropDownError">Enter Country ...</span>
  <hr>
  <button type="submit">submit</button>

</form>

TS:

export class AppComponent  {

  filtersForm: FormGroup;

  countriesOptions = [
      {label: 'New York', value: 'NY'},
      {label: 'Rome', value: 'RM'},
      {label: 'London', value: 'LDN'},
      {label: 'Istanbul', value: 'IST'},
      {label: 'Paris', value: 'PRS'}
  ];

  constructor(private fBuilder: FormBuilder) {

    this.filtersForm = this.fBuilder.group({
      "cifInput": new FormControl("", [ Validators.required, Validators.maxLength(10) ]),
      "paisDropdown": new FormControl("", [ Validators.required ])
    });
  }

  onSubmit() {
    for (let controller in this.filtersForm.controls) {
      this.filtersForm.get(controller).markAsTouched();
    }

    if(this.filtersForm.valid) {
      console.log('Ok')
    } else {
      console.log('No')
    }
  }

  get hasDropDownError() {
    return (
      this.filtersForm.get('paisDropdown').touched &&
      this.filtersForm.get('paisDropdown').errors &&
      this.filtersForm.get('paisDropdown').errors.required
    )
  }

  get hasInputErrorRequired() {
    const controller = this.filtersForm.get('cifInput');
    return controller.touched && controller.errors && controller.errors.required
  }

  get hasInputErrorMaxlength() {
    const controller = this.filtersForm.get('cifInput');
    return controller.touched && controller.errors && controller.errors.maxlength
  }

}

in Angular 8 there is a new method call .markAllAsTouched(). in this example we have to just remove for loop in subpit and use this.filtersForm.markAllAsTouched()

Gopakumar · Accepted Answer · 2020-07-24 11:16:17Z

Html:-

<input class="form-control"  type="text" formControlName="price" />

<div  class="alert alert-danger"
   *ngIf="createForm.controls.price.hasError('required') && 
   createForm.controls.price.touched || 
  createForm.controls.price.dirty)">

    Price Required
                   
 </div>

Ts :-

this.createForm = this.formBuilder.group({ 
   'price':['', [Validators.maxLength(100)],
   'FruitType':['', [Validators.maxLength(100)]

});

when dropdown values changes adding validation for price field.

this.createForm.controls['FruitType'].valueChanges.subscribe(value => {
  if(value !== '') {
    this.createForm.get('price').setValidators([Validators.required]);
    this.createForm.controls['price'].updateValueAndValidity();
  } else {
    this.createForm.get('price').clearValidators();
    this.createForm.controls['price'].updateValueAndValidity();
  }
 });

Collectives™ on Stack Overflow

Angular dropdown validation

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related