Angular Forms Part 7 DropDownList

.html Changes .

<form #studentForm="ngForm" (ngSubmit)="RegisterStudent(studentForm)">

        <div class="form-group">

          <label for="branch">Branch</label>

          <select id="branch" name="branch" ngModel class="form-control">

            <option value="1">CSE</option>

            <option value="2">ETC</option>

            <option value="3">Mechanical</option>

            <option value="4">Electrical</option>

          </select>

        </div>

        <div class="panel-footer">

          <button class="btn btn-primary" type="submit">Submit</button>

        </div>

    </form>

.ts Changes

@Component({

  selector: 'app-formsvalidation',

  templateUrl: './formsvalidation.component.html',

  styleUrls: ['./formsvalidation.component.css']

})

export class FormsvalidationComponent {

 

  RegisterStudent(studentForm: NgForm): void {  

    console.log(studentForm.value);

  }

}

OutPut

Dropdownlist item selected 

If we include the selected attribute on the dropdownlist, then we may expect that option or item to be selected by default. But in angular template driven forms, that will not work. Lets include the “selected” attribute on the ETC branch option to verify this

 <select id="branch" name="branch" class="form-control">

            <option value="1">CSE</option>

            <option value="2" selected>ETC</option>

            <option value="3">Mechanical</option>

            <option value="4">Electrical</option>

          </select>

ETC department is not selected by default when the page load.

However, if you remove the “ngModel” directive from the select list as shown below, then you will see that the ETC branch is selected when the form is load.

Output

we use the “ngModel” directive in angular for two-way data binding. So when we put the ngModel directive back into the control then the “selected” attribute will not work on the drop down list or select list. If we remove the ngModel directive from the control then selected attribute work but two way data binding will not work.

To Make it work

.html 

<form #studentForm="ngForm" (ngSubmit)="RegisterStudent(studentForm)">

        <div class="form-group">

          <label for="branch">Branch</label>

          <select id="branch" name="branch" [(ngModel)]="BranchId" class="form-control">

            <option value="1">CSE</option>

            <option value="2">ETC</option>

            <option value="3">Mechanical</option>

            <option value="4">Electrical</option>

          </select>

        </div>

        <div class="panel-footer">

          <button class="btn btn-primary" type="submit">Submit</button>

        </div>

    </form>

.ts

export class FormsvalidationComponent {

  BranchId = "2";

  RegisterStudent(studentForm: NgForm): void {  

    console.log(studentForm.value);

  }

Output

 

Dynamically Binding Drop Down

.html Changes

<form #studentForm="ngForm" (ngSubmit)="RegisterStudent(studentForm)">

        <div class="form-group">

          <label for="branch">Branch</label>

          <select id="branch" name="branch" class="form-control" ngModel>

            <option *ngFor="let branch of Branches" [value]="branch.id">

              {{branch.name}}

            </option>

          </select>

        </div>

        <div class="panel-footer">

          <button class="btn btn-primary" type="submit">Submit</button>

        </div>

    </form>

.ts Changes

@Component({

  selector: 'app-formsvalidation',

  templateUrl: './formsvalidation.component.html',

  styleUrls: ['./formsvalidation.component.css']

})

export class FormsvalidationComponent {

 

  Branches: any[] = [

    { id: 1, name: 'CSE' },

    { id: 2, name: 'ETC' },

    { id: 3, name: 'Mechanical' },

    { id: 4, name: 'Electrical' }

  ];

  RegisterStudent(studentForm: NgForm): void {  

    console.log(studentForm.value);

  }

}

Output