Angular dropdown validation

user_6852883 0
Viewed 23409

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 !!!

angular html
2 Answers

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
  }

}
user_15382850

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();
  }
 });
user_77901970
Related