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

Answer 1

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
  }

}