Default selected checkbox

Question

I want to ask about how I can set option to be default selected?

<form [formGroup]="form2">
  <select formControlName="drop">
    <option disabled>Choose one</option>
    <option *ngFor="let example of examples" [value]="example.id" [disabled]="example.isDisabled" [selected]="example.isSelected">{{ example.name }}</option>
  </select>
</form>

Component:

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

@Component({
  selector: 'app-drop-down-list',
  templateUrl: './drop-down-list.component.html',
  styleUrls: ['./drop-down-list.component.css']
})
export class DropDownListComponent implements OnInit {

  public form = new FormGroup({
    drop: new FormControl('',
      Validators.required,
    ),
  });

  public form2 = new FormGroup({
    drop: new FormControl('',
      Validators.required,
    ),
  });

  examples = [{
    id: 1, name: 'Test1', isSelected: false, isDisabled: true,
  },
  {
    id: 2, name: 'Test2', isSelected: true, isDisabled: false,
  },
  {
    id: 3, name: 'Test3', isDisabled: false,
  }
  ];

  constructor() { }

  ngOnInit() {
  }

  onSubmit(form) {
    console.log(form);
  }

}

I was searching on stack but I don't want to mix reactive forms with ngModel, also I don't wan't to use patchValue because It only set default value without choosing element in list. Thanks for help!

Pranay Rana · Accepted Answer · 2018-04-10 07:34:06Z

2

if you want option to be selected then do like this , just pass id value in your formcontrol intialization

  public form2 = new FormGroup({
    drop: new FormControl(this.examples[0].id,
      Validators.required,
    ),
  });

or if you dont want to initialization immediately and want later on then make use of setValue method, below is required when you are fecthing data from server and want to set value i just hard coded value just to show as example , you should replace with the value you get from server

form2.get('drop').setValue('1');

html should be as below no need of [selected]

 <select formControlName="drop">
    <option disabled>Choose one</option>
    <option *ngFor="let example of examples" [value]="example.id" [disabled]="example.isDisabled" >{{ example.name }}</option>
  </select>

edited Apr 10, 2018 at 7:34

answered Apr 10, 2018 at 7:31

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user4676340 Over a year ago

I would have gone for new FormControl(this.examples[0].id, Validators.required) but otherwise I agree

Pranay Rana Over a year ago

@trichetriche - ok lets do the change , updated answer

Gnex Over a year ago

Thanks! I have only one more question, we're I can find list of attributes that doesn't work normal with angular?

Pranay Rana Over a year ago

@Gnex - normally html attributes not work with anuglar , for example tooltip on textbox or

Collectives™ on Stack Overflow

Default selected checkbox

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related