How to apply required validation to dropdown in angular 2

Question

I am using select html tag and I am binding list to it. I want a required validation if dropdown is not selected and showing \'Select\' on its header.

Answer 1

<div class="form-group select-box">
  <select class="form-control select_style1" [(ngModel)]='car.model' formControlName='model' #model>
    <option value="" >Select Model</option>
    <option value="option1b">Option 1</option>
    <option value="option2b">Option 2</option>
    <option value="option3b">Option 3</option>
  </select>
  <span *ngIf="modelForm.get('model').hasError('required') && modelForm.get('model').touched" class='error' padding>Model is a required field.</span>
</div>

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
car: any={}
modelForm: FormGroup;
  constructor(public route: Router) {
    this.modelForm = new FormGroup({
      make: new FormControl('', [Validators.required]),
      model: new FormControl('', [Validators.required])

    })
   }

  ngOnInit() {
  }

  enterPin() {
    this.route.navigate(['enter-pin-code'])
  }
}

<div class="form-group select-box">
<select class="form-control select_style1" [(ngModel)]='car.model' formControlName='model' #model>
<option value="" >Select Model</option>
<option value="option1b">Option 1</option>
<option value="option2b">Option 2</option>
<option value="option3b">Option 3</option>
</select>
<span *ngIf="modelForm.get('model').hasError('required') && modelForm.get('model').touched" class='error' padding>Model is a required field.</span>
</div>

Answer 2

I have used *ngIf syntax, but you can provide validation on dropdown like :

<div class="form-group">
    <div>
        <label for="country">Country*:</label>
    </div>
    <div ng-class="{'valid':country.$valid}">
        <select class="form-control" name='country' [(ngModel)]='fd.country' required>
            <option *ngFor="let obj of country" [ngValue]="obj">{{obj}}</option>
        </select>
    </div>
    <small *ngIf="(myForm._submitted && !country.valid && !fd.country) || (!country.valid && country.dirty) ">Required (Please select country).</small>
</div>

Answer 3

This is the best way to use selected attribute using angular

<select ng-model="group_id" required name="group" class="form-control">
   <option ng-repeat="data in globalScope.groups"
   ng-selected='globalScope.editPost.data.group_id'
   value="{{data.id}}">
   {{data.name}}</option>
</select>